azfaralam440/wanderlust-frontend repository overview

⁠Wanderlust Frontend

This is a three-tier Wanderlust App built using React, Node, and MongoDB. For this app, I will create two Docker images: the first one is "wanderlust-Frontend⁠," which runs only the frontend part, and the second one is "wanderlust-Backend⁠," which runs the backend part.

⁠✨ For more information about this visit once github repository⁠.

⁠Steps for run this app

Firstly, we will build images for the frontend, backend, and MongoDB database.

• Build frontend for this App

 docker pull azfaralam440/wanderlust-frontend:latest

• Now build Backend

docker pull azfaralam440/wanderlust-backend:latest

⁠Then clone the GitHub repository first, or you can also fork the repository to your system.

git clone https://github.com/mdazfar2/three-tier-deploy-wanderlustApp.git

• I am suggesting that you clone this Git repository because all the main code is located here.

1. Go to the frontend directory

   cd three-tier-deploy-wanderlustApp/frontend
   

   Copy
2. Open .env. sample file

   VITE_API_PATH="http://YOURIP:5000"
   

   Copy
3. Now in the above we already pull our Images from dockerhub
4. Create a network that will connect React, Node and Mongo to eact other

   docker network create threetier
   

   Copy
5. Navigate to the Backend file

   cd three-tier-deploy-wanderlustApp/backend
   

   Copy
6. Open the .env.sample file

   MONGODB_URI="mongodb://YOURIP/wanderlust"
   

   Copy
7. Now creating mongo container and connect with the same network which we create above

   docker run -d --name mongo --network=threetier -p 27017:27017 mongo:latest
   

   Copy
8. Create container for Backend

   docker run -d --name backend --network=threetier -p 5000:5000 azfaralam440/wanderlust-backend:latest
   

   Copy
9. Create container for Frontend

   docker run -d --name frontend --network=threetier -p 5173:5173 azfaralam440/wanderlust-frontend:latest 
   

   Copy
10. then open the .env.sample file of backend

MONGODB_URI="mongodb://mongo/wanderlust"

1. then import sample data to featured section

docker exec <containername-id-of-mongo> -it  mongoimport --db wanderlust --collection posts --file ./data/sample_posts.json --jsonArray

1. Then run in your respective browser

<ur-ip:5173>