This is a team project built within 4 days in a group of 3 student software engineers. We all love traveling and documenting our trips, so we made a Travel Log to make documenting trips easier for people like us!
Click here to enter Travel Log.
Username: demo
Password: demo
- Build a full-stack application with CRUD functionality
- Use an Express API
- Implement thoughtful user stories
- Be deployed online via Heroku
- JavaScript
- HTML
- CSS
- Node.js
- Express
- MongoDB
- React
- Material UI (MUI)
- Bcrypt
- GitHub
- Heroku
App design was collaboritively created and iterated via Adobe XD. A large area of discussion for the team was the user click through journey for the progression of their trips and the association with the users events that are aligned to each trip.
Front end design was achieved using Material UI framework for styling.
The team spent quite a bit of time discussing and planning our data structure. We chose to use relational databasing between trips and a one-to-many relationships to events withing the relevant trip. We discussed several other options including a relationship between country of trip and events within each country - but due to time constraints we chose to allow the user to create a trip with events from any part of that trip. This allows the user to allocate events accross a trip that includes multiple countries and continents.
However, relational databasing proved to have its own complexity when creating CRUD functionality for events that are nested within a trip. Understanding where the useState lies in order to create/update/delete events was a challenge that was overcome by refactoring the code to ensure that when an event was changed, it was updated in the trip state, rather than having a separate state for trip.
In terms of styling, we found that in order to avoid refactoring of code it was best to incorporate the particular framework that is being used/to be used whilst building the functionality based on the limited time we had. This would have avoided a lot of refactoring for the frontend formatting.
A big thanks to Dido @ General Assembly who helped guide us to the right direction whenever we got stuck & to Hugh @ General Assembly for sharing his knowledge!