Overview
This project built with ReactJS and styled using TailwindCSS. The website features a range of McDonald's menu items, including burgers, fries, drinks, and desserts, with images and prices for each item.
To ensure quality and reliability, I also included automated tests using Jest and Cypress. Users can easily navigate through the website and filter items by category. The website is designed to be responsive and user-friendly, providing an enjoyable experience for anyone looking to browse McDonald's menu items.
Tech stacks
ReactJS, TailwindCSS, Jest, Cypress
Task
User stories
- User should be able to search by keywords
- User should be able to filter the food by categaries
- User should be able to see names and images of the food
- User should be able to check the details of each food
Challenge
It's been a year since the last time I coded with React It can be challenging to pick up a framework or language that you haven't used in a while. In this case, I had to spend some time relearning the basics of ReactJS and refreshing my knowledge of its syntax and features. I overcame this challenge by spending some time reviewing online tutorials and documentation and practicing coding exercises.
Implentmenting 'Load more' button One of the features I wanted to include in this project was a "Load more" button to display additional menu items without refreshing the page. This proved to be a challenging task, especially since I had limited experience working with pagination in ReactJS. I tackled this challenge by researching various pagination techniques and experimenting with different code implementations until I found a solution that worked.
Finish it within 3 days Time management can be a significant challenge when working on any project. Completing this project within three days required careful planning, prioritization, and a disciplined approach to coding. I overcame this challenge by breaking down the project into smaller, more manageable tasks and setting clear goals for each day. Additionally, I utilized tools like Trello to track my progress and make sure I stayed on schedule.
Approach
Starting with Design I began by designing the website's layout and user interface using Figma, which helped me visualize the final product and plan out its components before starting to code.
Time management Since I had a tight deadline of 3 days, I managed my time carefully, allocating specific amounts of time for each task and prioritizing the most important features to complete first.
'Better than nothing' mentality In order to finish the project on time, I followed a 'better than nothing' mentality, ensuring that even if certain features weren't perfect, they were functional and met the basic requirements of the user stories. This allowed me to keep making progress and complete the project within the given timeframe.
Result
I managed to complete the project within the given time frame and the end result was a functional and user-friendly McDonald's menu website. I spent around 2 hours per day on this project.
What I've learnt
State Management Managing state in a React application can be a challenging task, especially when dealing with large amounts of data. Through this project, I gained a better understanding of how to manage state in a more efficient and organized way.
Expectation Management Setting realistic expectations for a project is crucial to its success. During this project, I learned how to set achievable goals and manage my own expectations to ensure that I was able to complete the project on time.
Handle Data Without Database
In this project, I had to work with data without using a database. It was a great opportunity to learn how to handle data effectively and efficiently without relying on a database, for example, in this project, I stored all data in a single data.ts file.
