My Moringa School Phase 1 Project
The project I decided to go with was a rental car app called: Rush Car Rental, where an individual can reserve a car to rent, submit the details to rent a car on the site, and delete a car from the database.
Here is the link to the webpage: https://tomutanyi.github.io/phase-1-project/
Here is a screenshot of the webpage:
I used GET, PATCH, POST and DELETE methods, while making the website and ensured that all changes persisted after reloading the webpage. I found images on Pexels since the Image URLs are relatively short and easy to manage.
Features
- Reserving a car
A user is able to click on the reserve button and have the number of cars available reduce by 1. This change is reflected on the db.json file and after refreshing, is still reflected on the website
2. Adding a car
A user is able to fill a form with the relevant details and add a car to the website, this change is also reflected to the db.json file with the new car having a unique ID.
3. Deleting a Car
A user is able to enter a car ID and delete it from the db.json file. There is also a prompt that ensures a user enters ‘yes’ before deleting a car from the database. “yes” is case insensitive
4. There is also a dark mode button that changes the background to a dark color. This feature is useful in low light areas or to save power on a device.
5. Responsive
The page is fully responsive allowing users to change the size of the window without affecting the layout of the content. The links in the navbar are also responsive, leading to sections in the page itself or to external links such as the blog post you are currently reading.
6. Contacts and Footer
There is a footer at the bottom of the page with the name of the author: Tom Omele Mutanyi, as well as a mailto link and a phone number to contact the author
During the preparation for the project, our TM, Daisy Machoka, walked us through the process of hosting a db.json file on a website called Render. Render is useful for hosting db.json files because you can run the server on the platform usng Node.js. Hosting a site on Github Pages is useful for HTML, CSS and Javascript files but has the disadvantage of not running Node.js.
A way to get your website online is to use both Github pages and Render. After finishing testing on the file on my local machine using Node.js, I changed the server from http://localhost:3000/cars to the link from my db.json file running on render: https://rush-car-rental.onrender.com/cars .
This means that any changes to the JSON file will persist after reloading the page. I can also make updates on my website from my local machine and push them to GitHub. After a few minutes, the changes will be shown on my webpage.
That is the progress I have made so far.
I will make a video walkthrough soon to show the Javascript code as well as elaborate on any challenges I faced in the process of creating this site.
I found this article really helpful on explaining how to host a db.json file on Render:
https://medium.com/@guylikericky/deploy-db-json-file-with-render-f2bff3330e12
You can contact me at @tom_mutanyi on twitter if you have any questions. Thanks for reading and happy coding.
