These articles have the tutorials and documentation for this codebase.
https://dev.to/livecycle/how-to-build-and-deploy-a-modern-day-nextjs-application-mgn
https://andrewbaisden.hashnode.dev/the-complete-modern-react-developer-2022
-
Start the Docker Desktop Application on your computer
-
cd
into the root folder for backend-nest-mongodb and frontend and then run the commands below to install the dependencies. You will probably need to force the installation when trying to install the dependencies for the frontend React application in this case otherwise it could give you an error.
# Run this command inside of the backend-nest-mongodb folder
npm install
# Run this command inside of the frontend folder
npm install --force
cd
into the root folder for docker-twitter-mongodb and run the command below to start the MongoDB database inside of a Docker Container.
docker compose up
cd
into the root folder for backend-nest-mongodb and run the command below to start the backend NestJS server.
npm run start:dev
cd
into the root folder for frontend and run the command below to start the frontend React server.
npm run start
You should see your database running inside of a Docker Container and your Twitter Clone React application open in the browser.
Run these commands inside of the root folder for frontend which is where React is. The command below starts Storybook.
# Starts Storybook
npm run storybook
You should see a Storybook component library open in the browser with a component for composing tweets. You can play around and change the names in the control to see how it looks in the demo. The command below runs the unit and integration tests.
# Runs the React testing library unit and integration tests
npm run jest
All of the tests should be passing in your console. The command below starts Cypress.
# Runs the Cypress End-To-End tests
npx cypress open
A new Cypress window should open. Run the integration test and get ready to be amazed as it automatically posts 3 tweets for you!
Use these example routes for testing in Postman or whatever REST API tool you are using:
Request: GET Route: http://localhost:8080/tweets
Request: GET Route: http://localhost:8080/tweets/d5d29839-788f-4d23-99ee-82b49ff1bbf1
Request: POST Route: http://localhost:8080/tweets
Body raw: {"tweet": 'Hello World', img: ""}
Request: POST Route: http://localhost:8080/tweets/d5d29839-788f-4d23-99ee-82b49ff1bbf1
Body raw: {"tweet": 'Hello Moon', img: ""}
Request: DELETE Route: http://localhost:8080/tweets/d5d29839-788f-4d23-99ee-82b49ff1bbf1