7 days
- HTML5 & JavaScript (ES6)
- React.js, Webpack, Babel, Axios & Yarn
- CSS3, CSS Animation, SCSS & Bulma
- Express.js, Mongoose & MongoDB
- Insomnia, Mocha & Chai
- Git, & GitHub
- Heroku
Our App - Hidden Gems
A hosted version of the application can be found here ----> hidden-gems-2.herokuapp.com
The app is based on hidden gems of the world where users can discover and share new 'Gems'. The application has full user authentication to create a profile for their 'Gems' and 'Trips'.
1.To use the full functionality of the application a user must register to create an account.
2.A user is the required to login with their email and password via the login page.
3.Once logged in, a user can see their profile which summarises the 'Gems' and 'Trips' they have created on the platform. Followed users are also displayed on the profile page.
- A user can discover 'Gems' from the index pages. 'Gems' can be searched for by category or location. Hovering on each 'Gem' shows the title and location of the 'Gem'.
- The 'Gem' show page displays details about the 'Gem' including location information with a map, 'Trips' associated with 'Gem' and a comments section.
- Users can discover 'Trips' from the index pages. 'Trips' can be searched for by category. Each 'Trip' card displays the 'Gems' that are included in the 'Trip' as well as the category of the 'Trip'.
- The 'Trips' show page displays information about the 'Trip' and any 'Trips' the 'Gem' is associated with. Comments can be added by users that are registered and on the platform and logged in. A map displays all the 'Gems' included in the 'Trip'.
- Other users can be followed by navigating to their profile and selecting the 'Follow' button in the profile banner. The followed user will be displayed on the user's profile page.
This project was delivered in a group with three other developers. We managed the project with an agile methodology with a clear timeframe for us to deliver as much of the scope as possible. To assist this process we used an Kanban Board in the form of Trello to plan and manage our task, utilising daily stand-ups to track progress and understand blockers.
To start the project wireframes were produced to capture a high level user journey and the layout of the application prior to any development taking place. This gave us a clear understanding of how each page would interact and a basic layout that we could apply consistently across the application.
The backend of the application was built using Express.js with a NoSQL MongoDB database. Models and Controllers were created for 'Gems', 'Trips' and 'User'. For both 'Gems' and 'Trips' CRUD routes were created to allow users to update 'Gems' and 'Trips' they had created. The User route included Register and Login to allow a user to create a profile to view and manage their 'Gems' or 'Trips'. User follow functionality was later added to the 'User' route.
The backend routes for 'Gem', 'Trip' and 'User' were tested using Insomnia to highlight bugs and to confirm the correct data was being returned or stored to the database.
The frontend of the application was built using React.js. I developed the 'Club' show page, user page, 'Gem' and 'Trip' Create and Edit pages. The application was styled using Bulma which was customised using Scss to add a branded style across the application. React-Select and Filestack were included in the create routes. The implementation of React-Select on the 'Trip' create form was a piece of code I was proud of. An AJAX request was made to the 'Gems' end point to obtain the latest array of created gems. The response was then mapped over to return the required parameters ('value' and 'label') for the React-Select package. This was then stored to state and accessed by the React-Select Component to display all the available 'Gems' in the React-Select dropdown.
This was my first experience using Git workflows which provided some challenges at the beginning of the project. As a team we developed all features on individual branches before merging with the 'development' branch. Conflicts had to be closely managed to ensure the correct version of the code was pushed to the 'development' branch. As a team we had a rigorous process which we followed as conflicts emerged. We also reduced the potential for conflicts by proactively managing task at the beginning of the day and understanding where conflicts could occur.
A feature that was added later in the project was to allow users to follow other users. A follow route was added to the backend application which added a 'follows' array in the 'User' schema. The below code snippit was something I was proud of. An AJAX request is made from the frontend when a user follows another user. The current user is found in the database by the ID supplied with the AJAX request. The user being followed is then pushed to the array of 'follows' stored in the 'User' record. The user is then saved to the database before being populated via the User schema and returned as part of the response to the frontend. This response is used to update state and display the user has now been followed.
Additional features that I would like to add if the project had a longer delivery timeframe include functionality where users can create a one off 'Trip' and invite other members join the 'Trip'.
On the 'Gems' index page I would like to add a map of all the 'Gems' to allow users to browser 'Gems' on a map rather than in list format.
Testing of our application was limited to the backend only and one collection. Given more time, testing would have extended to the Frontend.