The Complete Modern React Developer 2022

mongosh

db

show dbs;

use twitter;

db.createCollection('contents');

db.contents.insertMany([ {tweet: "Hello World!", img: ""}, {tweet: "Content creation and programming are basically full time jobs. I have enough projects and work to keep me busy for years. Working in tech is definitely going to entertain you for a long time which is why so many people want to transition into this field.", img: ""}, {tweet: "JavaScript developers are forever in high demand", img: ""} ])

pgcli

\l

CREATE DATABASE twitter;

\c twitter

CREATE TABLE contents (

id UUID DEFAULT gen_random_uuid (),

tweet VARCHAR(280) NOT NULL,

img VARCHAR(500) NOT NULL

);

INSERT INTO contents (tweet, img)

VALUES ('Hello World!', ''), ('Content creation and programming are basically full time jobs. I have enough projects and work to keep me busy for years. Working in tech is definitely going to entertain you for a long time which is why so many people want to transition into this field.', ''), ('JavaScript developers are forever in high demand', '');

mkdir docker-twitter-mongodb
cd docker-twitter-mongodb
touch docker-compose.yml

version: '3.9'
services:
  mongo_db:
    container_name: db_container
    image: 'mongo:latest'
    restart: always
    ports:
      - '2717:27017'
    volumes:
      - 'mongo_db:/data/db'
volumes:
  mongo_db: {}

docker compose up

mongosh --port 27017

mongodb://localhost:27017

mongosh --port 2717

mongodb://localhost:2717

mongosh --port 2717

use twitter;

db.createCollection('contents');

db.contents.insertMany([ {tweet: "Hello World!", img: ""}, {tweet: "Content creation and programming are basically full time jobs. I have enough projects and work to keep me busy for years. Working in tech is definitely going to entertain you for a long time which is why so many people want to transition into this field.", img: ""}, {tweet: "JavaScript developers are forever in high demand", img: ""} ]);

mkdir docker-twitter-postgresql
cd docker-twitter-postgresql
touch docker-compose.yml
mkdir sql
cd sql
touch twitter.sql
cd ..

version: '3.7'
services:
  postgres:
    image: postgres:latest
    restart: always
    environment:
      - POSTGRES_USER=twitter
      - POSTGRES_PASSWORD=twitter
      - POSTGRES_DB=twitter
    ports:
      - '5433:5432'
    volumes:
      - ./postgres-data:/var/lib/postgresql/data
      # copy the sql script to create tables
      - ./sql/twitter.sql:/docker-entrypoint-initdb.d/twitter.sql

CREATE TABLE contents (

id UUID DEFAULT gen_random_uuid (),

tweet VARCHAR(280) NOT NULL,

img VARCHAR(500) NOT NULL

);

INSERT INTO contents (tweet, img)

VALUES ('Hello World!', ''), ('Content creation and programming are basically full time jobs. I have enough projects and work to keep me busy for years. Working in tech is definitely going to entertain you for a long time which is why so many people want to transition into this field.', ''), ('JavaScript developers are forever in high demand', '');

docker compose up

pgcli -h localhost -p 5433 -u twitter -d twitter

mkdir backend-express-mongodb
cd backend-express-mongodb
tsc --init
npm init -y
npm i express @types/express @types/node ts-node cors @types/cors mongoose @types/mongoose typescript rimraf copy-files dotenv nodemon
touch .env
mkdir src
cd src
touch app.ts
mkdir controllers models routes
touch controllers/Admin.ts
touch models/Twitter.ts
touch routes/Admin.ts
cd ..

"rootDir": "./src" /* Specify the root folder within your source files. */,
"moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
"outDir": "./dist/src" /* Specify an output folder for all emitted files. */,

"scripts": {

"start": "node dist/src/app.js",

"dev": "nodemon src/app.ts",

"clean": "rimraf dist/",

"build": "npm run clean && tsc && npm run copy-files",

"copy-files": "copyfiles -u 1 src/**/*.html src/**/*.css src/**/*.json dist/src"

},

import { Response, Request } from 'express';

import mongoose from 'mongoose';

import Twitter from '../models/Twitter';

export const getTweets = (req: Request, res: Response): void => {
    Twitter.find((err, data) => {
        console.log(data);

        res.json(data);

        if (err) {
            console.log(err);
        }
    });
};

export const getTweet = async (req: Request, res: Response): Promise<any> => {
    const tweetId = req.params.tweetId;

    console.log('Tweet ID', tweetId);

    // This line of code fixes the CastError: Cast to ObjectId failed for value "favicon.ico" (type string) at path "_id" for model "contents"

    if (!mongoose.Types.ObjectId.isValid(tweetId)) return false;

    await Twitter.findById(tweetId).exec();

    Twitter.findById(tweetId, (err: any, tweet: any) => {
        console.log(tweet);

        res.json(tweet);

        if (err) {
            console.log(err);
        }
    });
};

export const postTweet = (req: Request, res: Response) => {
    const { tweet, img } = req.body;

    const twitter = new Twitter({ tweet: tweet, img: img });

    twitter.save();

    console.log('Tweet Created');

    res.status(201).json({ msg: 'Tweet Created' });
};

export const updateTweet = (req: Request, res: Response) => {
    const tweetId = req.params.tweetId;

    const { tweet, img } = req.body;

    Twitter.findByIdAndUpdate(tweetId, { tweet: tweet, img: img }).then(() => {
        console.log(`Tweet ${tweetId} Updated`);

        res.json({ msg: `Tweet ${tweetId} Updated` });
    });
};

export const deleteTweet = (req: Request, res: Response) => {
    const tweetId = req.body.tweetId;

    Twitter.findByIdAndRemove(tweetId, () => {
        res.json({ msg: `Tweet ${tweetId} Deleted` });
    });
};

import { Schema, model } from 'mongoose';

interface Twitter {
    tweet: string;

    img: string;
}

const schema = new Schema<Twitter>({
    tweet: { type: String, required: true },

    img: { type: String, required: false },
});

const TwitterModel = model<Twitter>('contents', schema);

export default TwitterModel;

import express from 'express';

import { getTweets, getTweet, postTweet, updateTweet, deleteTweet } from '../controllers/Admin';

const router = express.Router();

router.get('/', getTweets);

router.get('/:tweetId', getTweet);

router.post('/delete', deleteTweet);

router.post('/tweet', postTweet);

router.post('/:tweetId', updateTweet);

export default router;

import dotenv from 'dotenv';

dotenv.config();

console.log(process.env.DB_HOST);

import express from 'express';

import cors from 'cors';

import mongoose from 'mongoose';

import adminRoute from './routes/Admin';

const app = express();

app.use(cors());

app.use(express.urlencoded({ extended: false }));

app.use(express.json());

app.use('/', adminRoute);

const port = process.env.PORT || 8080;

mongoose

    // Use DB_HOST_DOCKER to connect to the MongoDB Database in the Docker Container

    .connect(`${process.env.DB_HOST_LOCAL}`)

    .then(() => {
        app.listen(port, () => console.log(`Server and database running on port ${port}, http://localhost:${port}`));
    })

    .catch((err: any) => {
        console.log(err);
    });

DB_HOST_LOCAL="mongodb://127.0.0.1:27017/twitter"

DB_HOST_DOCKER="mongodb://127.0.0.1:2717/twitter"

npm run dev

mkdir backend-express-postgresql
cd backend-express-postgresql
tsc --init
npm init -y
npm i express @types/express @types/node ts-node cors @types/cors typescript rimraf copy-files dotenv nodemon pg reflect-metadata typeorm
mkdir src
cd src
touch app.ts app-data-source.ts
mkdir entity
cd entity
touch Tweet.ts
cd ../..

{
    "compilerOptions": {
        "lib": ["es5", "es6", "dom"],

        "target": "es5",

        "module": "commonjs",

        "moduleResolution": "node",

        "emitDecoratorMetadata": true,

        "experimentalDecorators": true,

        "rootDir": "./src",

        "outDir": "./dist/src"
    }
}

"scripts": {

"start": "node dist/src/app.js",

"dev": "nodemon src/app.ts",

"clean": "rimraf dist/",

"build": "npm run clean && tsc && npm run copy-files",

"copy-files": "copyfiles -u 1 src/**/*.html src/**/*.css src/**/*.json dist/src"

},

import { Entity, Column, PrimaryGeneratedColumn } from 'typeorm';

@Entity()
export class Tweet {
    @PrimaryGeneratedColumn('uuid')
    id: string;

    @Column()
    tweet: string;

    @Column()
    img: string;
}

import { DataSource } from 'typeorm';

export const myDataSource = new DataSource({
    type: 'postgres',

    host: 'localhost',

    port: 5432,

    username: 'postgres',

    password: '',

    database: 'twitter',

    entities: ['dist/src/entity/*.js'],

    logging: true,

    synchronize: true,
});

import * as express from 'express';

import { Request, Response } from 'express';

import { Tweet } from './entity/Tweet';

import { myDataSource } from './app-data-source';

// establish database connection

myDataSource

    .initialize()

    .then(() => {
        console.log('Data Source has been initialized!');
    })

    .catch((err) => {
        console.error('Error during Data Source initialization:', err);
    });

// create and setup express app

const app = express();

app.use(express.json());

app.use(express.urlencoded({ extended: false }));

// register CRUD routes

// CREATE

// READ

// UPDATE

// DELETE

// READ: All tweets

app.get('/tweets', async function (req: Request, res: Response) {
    const tweets = await myDataSource.getRepository(Tweet).find();

    res.json(tweets);
});

// READ: Tweet by ID

app.get('/tweets/:id', async function (req: Request, res: Response) {
    const results = await myDataSource.getRepository(Tweet).findOneBy({
        id: req.params.id,
    });

    return res.send(results);
});

// CREATE: New tweet

app.post('/tweets', async function (req: Request, res: Response) {
    const tweet = await myDataSource.getRepository(Tweet).create(req.body);

    const results = await myDataSource.getRepository(Tweet).save(tweet);

    return res.send(results);
});

// UPDATE: Tweet by ID

app.put('/tweets/:id', async function (req: Request, res: Response) {
    const tweet = await myDataSource.getRepository(Tweet).findOneBy({
        id: req.body.id,
    });

    myDataSource.getRepository(Tweet).merge(tweet, req.body);

    const results = await myDataSource.getRepository(Tweet).save(tweet);

    return res.send(results);
});

// DELETE: Tweet by ID

app.delete('/tweets/:id', async function (req: Request, res: Response) {
    const results = await myDataSource.getRepository(Tweet).delete(req.body.id);

    return res.send(results);
});

const port = process.env.PORT || 8080;

// start express server

app.listen(port, () => console.log(`Server and database running on port ${port}, http://localhost:${port}`));

npm run build
npm run start

nest new backend-nest-mongodb

cd backend-nest-mongodb
npm install --save @nestjs/mongoose mongoose
nest g controller twitter
nest g service twitter

touch src/twitter/twitter.module.ts
mkdir src/twitter/{dto,schemas}
touch src/twitter/dto/create-twitter.dto.ts
touch src/twitter/schemas/twitter.schema.ts

import { Module } from '@nestjs/common';

import { MongooseModule } from '@nestjs/mongoose';

import { TwitterController } from './twitter/twitter.controller';

import { TwitterService } from './twitter/twitter.service';

import { TwitterModule } from './twitter/twitter.module';

@Module({
    imports: [
        TwitterModule,

        // Local MongoDb database

        // Change the port to 127.0.0.1:2717 to connect to Docker

        MongooseModule.forRoot('mongodb://127.0.0.1:27017/twitter'),
    ],

    controllers: [TwitterController],

    providers: [TwitterService],
})
export class AppModule {}

import { Model } from 'mongoose';

import { Injectable } from '@nestjs/common';

import { InjectModel } from '@nestjs/mongoose';

import { Twitter, TwitterDocument } from './schemas/twitter.schema';

import { CreateTwitterDto } from './dto/create-twitter.dto';

@Injectable()
export class TwitterService {
    constructor(@InjectModel(Twitter.name) private twitterModel: Model<TwitterDocument>) {}

    async create(createTwitterDto: CreateTwitterDto): Promise<Twitter> {
        const createdTwitter = new this.twitterModel(createTwitterDto);

        return createdTwitter.save();
    }

    async findAll(): Promise<Twitter[]> {
        return this.twitterModel.find().exec();
    }

    async findOne(id: string): Promise<Twitter> {
        return this.twitterModel.findOne({ _id: id });
    }

    async update(id: string, twitter: Twitter): Promise<Twitter> {
        return this.twitterModel.findByIdAndUpdate(id, twitter, { new: true });
    }

    async delete(id: string): Promise<Twitter> {
        return this.twitterModel.findByIdAndRemove({ _id: id });
    }
}

import { Module } from '@nestjs/common';

import { MongooseModule } from '@nestjs/mongoose';

import { Twitter, TwitterSchema } from './schemas/twitter.schema';

@Module({
    imports: [MongooseModule.forFeature([{ name: Twitter.name, schema: TwitterSchema }])],

    exports: [MongooseModule],
})
export class TwitterModule {}

import { Controller, Get, Post, Body, Param, Put, Delete } from '@nestjs/common';

import { CreateTwitterDto, TwitterDto } from './dto/create-twitter.dto';

import { TwitterService } from './twitter.service';

@Controller('tweets')
export class TwitterController {
    constructor(private twitterService: TwitterService) {}

    @Post()
    async create(@Body() createTwitterDto: CreateTwitterDto) {
        this.twitterService.create(createTwitterDto);
    }

    @Get()
    async findAll(): Promise<TwitterDto[]> {
        return this.twitterService.findAll();
    }

    @Get(':id')
    async findOne(@Param('id') id): Promise<TwitterDto> {
        return this.twitterService.findOne(id);
    }

    @Put(':id')
    update(
        @Body() updateTwitterDto: CreateTwitterDto,

        @Param('id') id
    ): Promise<TwitterDto> {
        return this.twitterService.update(id, updateTwitterDto);
    }

    @Delete(':id')
    delete(@Param('id') id): Promise<TwitterDto> {
        return this.twitterService.delete(id);
    }
}

import { Prop, Schema, SchemaFactory } from '@nestjs/mongoose';

import { Document } from 'mongoose';

export type TwitterDocument = Twitter & Document;

@Schema()
export class Twitter {
    @Prop()
    tweet: string;

    @Prop()
    img: string;
}

export const TwitterSchema = SchemaFactory.createForClass(Twitter);

export class CreateTwitterDto {
    id?: string;

    tweet: string;

    img: string;
}

export class TwitterDto {
    id?: string;

    tweet: string;

    img: string;
}

npm run start:dev

import { NestFactory } from '@nestjs/core';

import { AppModule } from './app.module';

async function bootstrap() {
    const app = await NestFactory.create(AppModule);

    app.enableCors();

    await app.listen(8080);
}

bootstrap();

nest new backend-nest-postgresql

cd backend-nest-postgresql
npm install --save pg @nestjs/typeorm typeorm
nest g controller twitter
nest g service twitter

touch src/twitter/{twitter.module.ts,twitter.entity.ts}
mkdir src/twitter/dto
touch src/twitter/dto/twitter.dto.ts

import { Module } from '@nestjs/common';

import { TypeOrmModule } from '@nestjs/typeorm';

import { TwitterController } from './twitter/twitter.controller';

import { TwitterService } from './twitter/twitter.service';

import { TwitterModule } from './twitter/twitter.module';

import { Connection } from 'typeorm';

@Module({
    imports: [
        TypeOrmModule.forRoot({
            type: 'postgres',

            host: 'localhost',

            port: 5432,

            username: 'postgres',

            password: '',

            database: 'twitter',

            entities: ['dist/**/*.entity{.ts,.js}'],

            synchronize: false,
        }),

        TwitterModule,
    ],

    controllers: [TwitterController],

    providers: [TwitterService],
})
export class AppModule {
    constructor(private connection: Connection) {}
}

import { Injectable, NotFoundException } from '@nestjs/common';

import { InjectRepository } from '@nestjs/typeorm';

import { DeleteResult, InsertResult, Repository } from 'typeorm';

import { Twitter } from './twitter.entity';

@Injectable()
export class TwitterService {
    constructor(
        @InjectRepository(Twitter)
        private twitterRepository: Repository<Twitter>
    ) {}

    async addTwitter(twitter: Twitter): Promise<InsertResult> {
        return this.twitterRepository.insert(twitter);
    }

    async findAll(): Promise<Twitter[]> {
        return this.twitterRepository.find();
    }

    async findOne(id: string): Promise<Twitter> {
        return this.twitterRepository.findOne(id);
    }

    async update(id: string, twitter: Twitter): Promise<Twitter> {
        const twitterUpdate = await this.findOne(id);

        if (twitterUpdate === undefined) {
            throw new NotFoundException();
        }

        await this.twitterRepository.update(id, twitter);

        return this.twitterRepository.findOne(id);
    }

    async delete(id: string): Promise<DeleteResult> {
        const twitterUpdate = await this.findOne(id);

        if (twitterUpdate === undefined) {
            throw new NotFoundException();
        }

        return this.twitterRepository.delete(id);
    }
}

import { Module } from '@nestjs/common';

import { TypeOrmModule } from '@nestjs/typeorm';

import { TwitterController } from './twitter.controller';

import { TwitterService } from './twitter.service';

import { Twitter } from './twitter.entity';

@Module({
    imports: [TypeOrmModule.forFeature([Twitter])],

    controllers: [TwitterController],

    providers: [TwitterService],

    exports: [TypeOrmModule],
})
export class TwitterModule {}

import { Entity, Column, PrimaryGeneratedColumn } from 'typeorm';

@Entity()
export class Twitter {
    @PrimaryGeneratedColumn('uuid')
    id: string;

    @Column()
    tweet: string;

    @Column()
    img: string;
}

import { Controller, Get, Post, Patch, Delete, Param, Body } from '@nestjs/common';

import { TwitterService } from './twitter.service';

import { TwitterDto } from './dto/twitter.dto';

import { Twitter } from './twitter.entity';

@Controller('tweets')
export class TwitterController {
    constructor(private twitterService: TwitterService) {}

    @Post()
    create(@Body() twitter: Twitter) {
        return this.twitterService.addTwitter(twitter);
    }

    @Get()
    findAll(): Promise<TwitterDto[]> {
        return this.twitterService.findAll();
    }

    @Get(':id')
    getOneTwitter(@Param('id') id: string): Promise<Twitter> {
        return this.twitterService.findOne(id);
    }

    @Patch(':id')
    updateTwitter(
        @Param('id') id: string,

        @Body() twitter: Twitter
    ): Promise<Twitter> {
        return this.twitterService.update(id, twitter);
    }

    @Delete(':id')
    deleteTwitter(@Param('id') id: string) {
        return this.twitterService.delete(id);
    }
}

export class TwitterDto {
    tweet: string;

    img: string;
}

CREATE TABLE twitter (



id UUID DEFAULT gen_random_uuid (),



tweet VARCHAR(280) NOT NULL,



img VARCHAR(500) NOT NULL



);



INSERT INTO twitter (tweet, img)



VALUES ('Hello World!', ''), ('Content creation and programming are basically full time jobs. I have enough projects and work to keep me busy for years. Working in tech is definitely going to entertain you for a long time which is why so many people want to transition into this field.', ''), ('JavaScript developers are forever in high demand', '');

import { NestFactory } from '@nestjs/core';

import { AppModule } from './app.module';

async function bootstrap() {
    const app = await NestFactory.create(AppModule);

    app.enableCors();

    await app.listen(8080);
}

bootstrap();

npm run start:dev

# Run this command inside of the backend-nest-mongodb folder
npm install

# Run this command inside of the frontend folder
npm install --force

docker compose up

npm run start:dev

npm run start

# Starts Storybook
npm run storybook

# Runs the React testing library unit and integration tests
npm run test

# Runs the Cypress End-To-End tests
npx cypress open

import { useEffect, useState, createContext, useContext } from 'react';

interface ContextProps {
    data: any;

    loading: boolean;

    handleToggleComposetweet: any;

    toggleComposeTweet: boolean;

    tweet: string;

    setTweet: any;

    postTweet: any;

    deleteTweet: any;
}

const TwitterContext = createContext({} as ContextProps);

export const useTwitter = () => useContext(TwitterContext);

const TwitterContextProvider = (props: any): any => {
    useEffect(() => {
        const getTweets = () => {
            const API = 'http://localhost:8080/tweets';

            fetch(API)
                .then((response) => {
                    console.log(response);

                    return response.json();
                })

                .then((data) => {
                    console.log(data);

                    setLoading(false);

                    setData(data);
                })

                .catch((err) => {
                    console.log(err);
                });
        };

        getTweets();
    }, []);

    const [data, setData] = useState([]);

    const [loading, setLoading] = useState(true);

    const [toggleComposeTweet, setToggleComposeTweet] = useState(false);

    const [tweet, setTweet] = useState('');

    const handleToggleComposetweet = () => {
        toggleComposeTweet === true ? setToggleComposeTweet(false) : setToggleComposeTweet(true);
    };

    const postTweet = () => {
        if (tweet === '') {
            let myHeaders = new Headers();

            myHeaders.append('Content-Type', 'application/json');

            let raw = JSON.stringify({
                tweet: 'Congratulations this is what happens when you post an empty tweet 🤪 Create some validation 🙃',

                img: '',
            });

            fetch('http://localhost:8080/tweets', { method: 'POST', headers: myHeaders, body: raw, redirect: 'follow' })
                .then((response) => response.text())

                .then((result) => console.log(result))

                .catch((error) => console.log('error', error));
        } else {
            let myHeaders = new Headers();

            myHeaders.append('Content-Type', 'application/json');

            let raw = JSON.stringify({
                tweet: tweet,

                img: '',
            });

            fetch('http://localhost:8080/tweets', { method: 'POST', headers: myHeaders, body: raw, redirect: 'follow' })
                .then((response) => response.text())

                .then((result) => console.log(result))

                .catch((error) => console.log('error', error));
        }
    };

    const deleteTweet = (tweetId: string) => {
        console.log('Deleted', tweetId);

        let urlencoded = new URLSearchParams();

        fetch(`http://localhost:8080/tweets/${tweetId}`, {
            method: 'DELETE',

            body: urlencoded,

            redirect: 'follow',
        })
            .then((response) => response.text())

            .then((result) => console.log(result))

            .catch((error) => console.log('error', error));

        window.location.reload();
    };

    const value = {
        data,

        loading,

        toggleComposeTweet,

        handleToggleComposetweet,

        postTweet,

        tweet,

        setTweet,

        deleteTweet,
    };

    return <TwitterContext.Provider value={value}>{props.children}</TwitterContext.Provider>;
};

export default TwitterContextProvider;

import { render, screen } from '@testing-library/react';

import App from './App';

describe('<App />', () => {
    it('has a following text label', () => {
        render(<App />);

        const el = screen.getByText(/Following/i);

        expect(el).toBeTruthy();
    });

    it('has a followers text label', () => {
        render(<App />);

        const el = screen.getByText(/Followers/i);

        expect(el).toBeTruthy();
    });

    it('has a you might like heading', () => {
        render(<App />);

        const el = screen.getByText(/You might like/i);

        expect(el.innerHTML).toBe('You might like');
    });

    it('has a whats happening heading', () => {
        render(<App />);

        const el = screen.getByText(/Whats happening/i);

        expect(el.innerHTML).toBe('Whats happening');
    });
});

describe('user form flow', () => {
    beforeEach(() => {
        cy.viewport(1600, 900);

        cy.visit('http://localhost:3000/');
    });

    it('user posts a tweet', () => {
        // Post a tweet

        cy.get('.compose-tweet-btn').click();

        cy.get('textarea[name="tweet"]').type(
            'What happened to all that fun you were having?! Come on, lets try to enjoy this!'
        );

        cy.wait(3000);

        cy.get('.post-tweet-btn').click();
    });

    it('user posts a second tweet', () => {
        // Post a tweet

        cy.get('.compose-tweet-btn').click();

        cy.get('textarea[name="tweet"]').type('That was an Attack on Titan easter egg 🥚 😄');

        cy.wait(3000);

        cy.get('.post-tweet-btn').click();
    });

    it('user posts a third tweet', () => {
        // Post a tweet

        cy.get('.compose-tweet-btn').click();

        cy.get('textarea[name="tweet"]').type(
            'The Rumbling arrives on Marley 😱 https://www.youtube.com/watch?v=wT2H68kEmi8'
        );

        cy.wait(3000);

        cy.get('.post-tweet-btn').click();
    });
});