A Plant Sitting App
This is my third project at General Assembly as a Software Engineer Immersive course's student. We were placed in a group of 4 to worked together to design and develop a MERN full-stack application within 7 days.
Seeded is a plant sitting app whereby plants' owners and plants' sitters can communicate with each other to share tips on plants, showcase their plants, look for a plant sitter or make a quick cash. The app features lots of functionalities such as image uploading and message boards.
- Collaborative development using Git and GitHub.
- Build a full-stack application using mongoose, express, react and node.js.
- Use Express API to serve the data from a Mongo database (MongoDB).
- Consume your API with a separate front-end built with React.
- Be a complete project with multiple relationships and CRUD functionality.
- Design a visually impressive Front End, with mobile responsiveness as a key element.
- Be deploy online and accessible to the public.
- HTML
- Bulma
- SCSS
- JavaScript
- React.js and JSX
- Express
- Node Package Manager (npm)
- Babel Transpiler
- Webpack
- MongoDB and Mongoose
- Insomnia
- VSCode
- Git
- GitHub
- Herokun(Deployment)
User should be able to:
- Register and login into our app.
- Update and delete their account.
- Add, update or delete plants in their profile.
- Post message on into the 'Pin Board'.
- Make comments on message on the 'Pin Board'.
On the first we discussed the full-stack app we wanted to design and build as a team and then we work through the backend framework together. We look at different features we wanted the app to have. We had to look into what our Schema might look like for our data. We also identify on day 1 that we will need an external API for this project, therefore we had to find the API that was able to give us the information required. Additionally, we looked at what CRUD endpoints we would like our API to have.
Below is a copy of the planning for our backend development we came out with this project.
Although we had created our own API. We still needed to use other external APIs on our front-end in order to achieve the functionality we wanted such:
- We use external API from treffle.io to fletch the information about the plant.
ENDPOINT from treffle:
https://trefle.io/api/v1/plants/search?token=YOUR_TREFLE_TOKEN&q=strawberry
This is the sample of the data that is retrieved from the endpoint. It returns up to 30 plants in an array
We started developing the backend together through 'Zoom Screenshare'. Starting with server.js, models (for our data, message and user), router.js and controllers. For each stage we tested on the 'terminal' and 'Insomnia' to see our codes were written correcting without a bug before moving onto the next task.
Examples of our backend structures, models, router.js and controllers.
Example of the structure of the model/Schema for our data.
Example of the routes for adding and editing a plant on the user's profile.
Example of how the CRUD functionality is executed on the Backend through the controller.
We call our external API from the backend.
When the user needs to add, update or delete a plant, message or a comment, we created authentication process through secure route. Therefore, a user can only post on the app if they are registered and have logged in on the app and they can only update or delete what they have posted. Below is the authentication for a user that is logged in.
We used the JSON Web Token (jwt) method to generate authentication.
After creating the fundamental of the Backend, we started working on the Frontend. Because we had initially created a detailed wireframe for this project at the beginning, we were well informed as a team on the functionality we wanted to execute on the frontend.
We briefly went through the components for the frontend and setted it up together through 'Zoom Screenshare' as shown below.
We used React hooks, useState and useEffect along with axios to fetch data from our internal API.
Example of the lines of codes for displaying messages on our message board (Pin Board).
Example of JSX for mapping the response data for the Messages
We wanted our app to display the location of all the users so that other users are able to see the plant sitter nearby. For this we use two external APIs:
-
Postcode.io - For grabbing the coordination of the users' locations via their postcode they had provided during the registration. Below is the code created for pulling these coordinates.
-
Mapbox - The location coordination grabbed by the Postcode.io is then used by the Mapbox to rendered on the page as a component with markers to display the users' locations on the map.
Styling was an important part in this project as we had to deliver a full-stack application with different functionalities and an impressive design. We looked at the design for all the features for our app from logo design to colour theme. Our colleague Enrico providing an excellent design direction for us.
Example of the logo and colour theme design.
There were four people in this people. Everyone coming with different ideas and knowledge level. Because I and the rest of the team members recognised and acknowledge each other’s skills, it made it easier when we had to separate the work equally within the team. The win for this project, was that We had a very detailed planning, which made things easier when I was working on the registration, login, plant pages etc. because I knew exactly what I had to create.
The only thing I found challenging was completing everything within the timeframe.
By the end of this project, I had learnt:
- How to build an API using Express, Mongoose and MongoDB.
- How to combine both internal and external APIs to create an expressive frontend using React.js.
- Importance of effective communication vital collaborating with others.
- Effectiveness of planning.
- Importance of setting and meeting deadlines.
- Presentation skill as we had to demonstrate our demo.
In our group we had to communicate effectively and respect each other's opinions and be supportive as we are all still learning. From the beginning we recognised and acknowledged each other strength, and we worked together effectively, ensuring we communicated regularly about our progress on the project. Our teams were very professional and by the end of the project, we had put together and deployed an app that I am very proud of. It looks amazing and it is easy to use. It had been an amazing experience to build our own API and then use it to do so many things on the frontend.