The Dorm Den 🐐

A Hostel Web Portal using MERN stack

Live Preview 🎈

About ℹ️

The Dorm Den is a Hostel Web Portal implemented in MERN stack by Bikrant Bidari, Sudeep Kaucha, Sameer Shrestha and Arahanta Pokhrel. While creating the project, we learnt about Event Listeners in React, React State, Conditional Rendering in React, React Hooks(useEffect,useState), React Routers, Styled components, etc. A user can search for hostels as per his/her requirement and a hostel owner can showcase his/her hostel. After creating the project, Frontend was deployed to Netlifyand Backend was deployed to Render.

Technologies Used 💻

Includes the following features ⚙️

    - Places autocomplete
    - Geo encoding
    - Filtering
    - Sorting
    - Encryption 

Usage 🪄

###Clone the repository using Github CLI
git clone https://github.com/bikrantbdr/TheDormDen.git

Frontend

###Go to the client folder
cd client
###Install Dependencies
npm install

###Start the developmet server(App will open in a new window)
npm start

Backend

###Go to the Backend folder
cd Backend
###Install Dependencies
npm install

###Create a .env file inside the Backend folder and add the following things inside that file:

MONGODB_URI = 
SECRET = 
PORT = 
SMPT_SERVICE = 
SMPT_EMAIL = 
SMPT_PASSWORD = 
COOKIE_EXPIRES_IN = 
CLOUDINARY_NAME =
CLOUDINARY_API_KEY = 
CLOUDINARY_API_SECRET = 

#Fill in the blank contents of the .env file with your data

###Deploy backend server locally
npm run dev

Steps we used to complete this project 🪜

➡️ Frontend

1. Initialize Frontend of the project 🐲

• Initialize the project using npx create-react-app thedormden which will create a complete React App pre-configured and pre-installed with the dependencies.
• Delete the Boiler plate.

2. Organize the project 🧹

• Create components, utils, assets and Pages folder inside the src directory.

3. Routing and Rendering 🛣️

• Index.jsx renders the React components
• App.jsx routes to the different pages.

4. Designing the Pages ✂️✨

• Design basic layout of the pages
• [x]

5. Pages 📄

• Create different pages according to the requirements

  5.1 Home Page:

  

  5.2 Search Page

  

  5.3 Individual Page

  

  5.4 Dashboard(User, Admin)

  

  5.5 Login Page

  

  5.6 Register Page

  

6. Packages 📦

• Install the packages to be used.

npm install 'npm-package-name'

• Some of the packages used in our project are

  6.1 Styled Components

  • Used to write CSS code within the JSX components.

  6.2 React Icons

  • To access customizable icons for use in React components

  6.3 Pigeon Map 🗺️

  • Display and access location details.

  6.4 Axios

  • Handle request from the frontend and get respond from the backend

  6.5 React Router DOM

  • Implement dynamic routing in the web app.

  6.6 Universal Cookie

  • Access cookies from all the routes.

  6.7 JWT decode

  • Decode the data from the cookie.

7. API(Application Programming Interface)📥

• Add the API's used in the project.

• Some of the used API's are

  7.1 Places Autocomplete API

  • predicts place in response to an HTTP response

  7.2 Geo Encoding API

  • provide geocoding and reverse geoencoding of addresses

8. Make App Responsive 📱

• Change Absolute units to Relative.
• Make App responsive for mobile by adding media query. 😊

9. Prepare for Deployment 🪢

• Delete unnecessary files from directory and format code with Prettier.
• Test for Responsiveness and make changes if need be.
• Add links to Live Preview and screenshots in Readme file.

10. Deploy 🚀

• Use official documentation of Netlify to deploy Frontend🎆🎆🎆

➡️ Backend

1. Initialize the Backend

• Create a new project and initialize it with the package manager i.e.npm init.

• Install necessary packages and dependencies, such as bcrypt, cloudinary, cors, dotenv, jsonwebtoken, mongoose, nodemailer, uuid, etc.

2. Organize the project 🧹

• Create folders to organize the code that are index,app, models, router, controllers, utils, etc.

• Define the database schema and models using Mongoose.

• Some of the files and their uses in the project

  2.1 Index file:

  • Responsible for setting up the environment and starting the server

  2.2 App file:

  • Define the core functionality of the server, including middleware and route handling

  2.3 Router file:

  • maps incoming request to the appropriate controller function

  2.4 Model file:

  • handles database queries, data validation and other operations related to data

  2.5 Util function:

  • provide resuable function which include token verification,query handling,logging and error handling

3. Implement server functionality 🎬

• Define routes and controllers to handle HTTP requests and responses, e.g., GET, POST, PUT, DELETE, etc.

• Implement authentication and authorization using JWTs and middleware functions.

• Implement error handling and logging using middleware functions,that are errorHandler, logger, etc.

• Implement file upload and management using Cloudinary and middleware functions.

• Implement email sending and verification using Nodemailer and middleware functions.

4. Test the server 🧪

• Test the server functionality and endpoints using tools such as Postman, Jest, Mocha, etc.we used postman

• Debug and fix any issues or errors.

5. Prepare for deployment ✈️

• Set environment variables and configurations for the server, such as PORT, MONGODB_URI, CLOUDINARY_URL, JWT_SECRET, etc

• Add build scripts to package.json for production deployment.

• Test the server locally and ensure it works correctly.

6. Deployment 🚀

• Use official documentation of Render to deploy Backend.

Future Changes ♾️

• Improve SEO
• Add animations and provide a better User Experience

Quote ✒️

"If the code is working but it isn't supposed to work and you don't know the reason, kindly don't touch the code. In short, If it works, don't change it." - Every Frustrated Coder 💭✨💯