LodgeINN is an application where users can post spots to host or book spots.
- Link to live LodgeInn project.
Technologies used within the project:
- bcryptjs: Version 2.4.3
- cookie-parser: Version 1.4.4
- [cors]: Version 2.8.5
- connect-session-sequelize: Version 7.0.4
- csurf: Version 1.11.0
- [dotenv]: Version 10.0.0
- express: Version 4.16.1
- [express-async-handler]: Version 1.2.0
- express-validator: Version 6.14.0
- [helmet]: Version 5.0.1,
- [jsonwebtoken]: Version 8.5.1
- morgan: Version 1.9.1
- [per-env]: Version 1.0.2
- pg: Version 2.0.4
- sequelize: Version 5.22.3
- sequelize-cli: Version 5.5.1
- dotenv: Version 8.2.0
- dotenv-cli: Version 4.0.0
- nodemon: Version 2.0.6
- [js-cookie]: Version 3.0.1
- [react]: Version 17.0.2
- [react-dom]: Version 17.0.2
- [react-redux]: Version: 7.2.6
- [redux]: Version 4.1.2
- React
- Redux
- Postgres
- Sequelize
- SQL
- Heroku
- JavaScript
- CSS
To install LodgeINN on your local machine please clone the project repository.
Once the project has been cloned cd into the backend and run npm install in your terminal to install the backend dependencies.
git clone https://github.com/Eric-Cortez/LodgeINN.git
cd backend
npm install
npm start
Once the project has been cloned cd into the frontend and run npm install in your terminal to install the frontend dependencies.
cd frontend
npm install
npm start
To use the application in a development environment use npm start in the backend and in the frontend to start the application.
This project was developed by a single developer Eric Cortez. Below is a description of the top features of the project and a brief description of challenges faced during the six-day development cycle.
-
Navigation: Implementation of dynamic navigation across the application with the use of React. This allows for a seamless browsing experience for the user as the page does not reload or refresh while accessing different features. This was also achieved by preventing the default of events such as on submit.
-
Redux: All information from database queries received through csurfetch request are stored in the Redux store and accessible to the components across the application.
-
Refreshing Edit Form Page: When implementing the feature to edit forms, I had difficulty keeping the state of the input data when refreshing the page. I was able to resolve this problem with the use of local storage. I set the input data to local storage and used a useEffect to set the input values on re-render.
-
Creating and Editing Form: When creating a Spot, the payload sent to the database must update three tables. Prior to this project, I had only updated one table at a time. I was unsure of how to implement this and through research, I found that I could send the data for all three tables in one payload and destructure it in the backend. I was able to use this technique for both editing and creating Spots.
-
Backend Validation Errors: When using the check method from express-validator, I faced a challenge as the validator returned a Bad Request error when creating and editing spots. After tracing the request in the handle validation function, I found that the data was entering the validation function, but my payload was nested so it was causing an error. Therefore, I had to key into the payload object in each check method in order to resolve the issue (ex: .check("image.url").
