last updated: 19/06/2024

About

Meal Master was a group project carried out during the final weeks of the sixteen-week bootcamp in front-end web development that was built as a sophisticated yet user-friendly React application designed to simplify the process of finding and preparing meals. By allowing users to search for recipes based on specific keywords and dietary preferences, Meal Master caters to a wide range of culinary needs and preferences.

Motivations

The intention of building this application is to help users who struggle to think of what to cook decide on a recipe. This can also allow the user to conveniently explore different recipes and cuisines to try. The combination of keyword and dietary preference search capabilities ensures that users can quickly and easily find recipes that match their requirements and preferences, improving overall user satisfaction. Additionally, the application emphasises good practices for fetching API requests using Axios and rendering customized results based on user input.

Tech Stack

React Material UI React Bootstrap Edamam API Axios

Why did we choose to use these?

Using React for building user interfaces ensures the app is performant and maintainable. Its component-based architecture makes the app scalable and easier to manage. Adopting modern tools and frameworks keeps the app up-to-date with industry standards.

Integrating Edamam's API provides access to diverse recipes and reliable nutritional information, making Meal Master a trustworthy source. This API integration streamlines development and offers users regularly updated and accurate recipe data.

Bootstrap ensures the app is responsive and accessible on various devices. Utilizing UI frameworks like Material UI and Bootstrap guarantees a polished and intuitive user interface, enhancing user retention and engagement.

What challenges did we face?

We encountered Git merge conflicts due to collaborative work, issues with API requests such as rate limiting and error handling, and challenges in rendering results efficiently and consistently, all while ensuring seamless integration of Material UI and Bootstrap components.

How did we tackle these challenges?

Excellent communication lead to brilliant collaboration, any issues ecountered during development were promptly addressed by working together, reading documentation and researching solutions from other developers, and the experience through trial and error provided valuable insights to resolving those issues.

Further development

Future enhancements for Meal Master include adding user profiles to personalise the user experience, implementing the functionality for users to save their favourite recipes directly to their profiles for easy access, and enabling users to add reviews and comments to recipes to foster a community of shared culinary experiences and feedback.

Collaborators

Metodieva, D, Ahmed, M, Nyathi, K

last updated: 10/09/2024

About

Solace Furnitures is a modern ecommerce platform designed to provide a seamless shopping experience for furniture enthusiasts. The website leverages contemporary technologies to ensure fast, responsive, and visually appealing user interactions.

Motivations

Developing an ecommerce application offers hands-on experience with React, reinforcing knowledge and improving coding skills through real-world application. React's architecture supports reusable, modular components, crucial for managing complex applications.

Building Solace Furnitures allowed me to integrate an API server and use various technologies like Redux Toolkit, Axios, React Query, React-Router-DOM, and Tailwind CSS to enhance functionality.

This experience provided valuable insights and skills directly applicable to real-world projects, making the development process educational and rewarding.

Tech Stack

React TailwindCSS React-Router-DOM Redux Toolkit React Query Axios

Why did I choose to use these?

I chose React for its component-based architecture, enabling reusable and modular code for managing a complex ecommerce application. Redux Toolkit was used for efficient state management, reducing boilerplate. React Query simplified data fetching, caching, and updates. Axios ensured smooth API integration, while React-Router-DOM enabled efficient client-side routing without full-page reloads.

What challenges did I face?

Using React hooks to manage state and side effects effectively. Integrating an API server with HTTP requests, and use React Query for data caching, optimising performance. These challenges deepened my understanding of React and front-end development, with more yet to learn.

How did I tackle these challenges?

To overcome the challenges, I researched and read documentation about the technologies, their uses, and best practices for applying them. Additionally, I watched YouTube videos and utilised Udemy courses to deepen my understanding of how and why these technologies are applied.

Further development

There are plans to further develop this project by implementing a checkout and payment feature using the Stripe API. Additionally, MongoDB will be used to store user credentials for their profiles and accounts, with Express.js and Node.js facilitating the backend operations. This opportunity will provide an introduction to the MERN stack development pathway, effectively opening doors to building more practical and robust web applications, and, in effect, complete a fully working ecommerce application.

last updated: 19/06/2024

About

Sprintyper is an innovative and engaging tool designed to help individuals improve their typing skills through practice and game-based learning. The platform features four distinct levels, each progressively increasing in complexity, challenging users to accurately type out phrases and sentences appropriate to their skill level.

Motivations

In today's digital world, efficient typing is crucial for communication, work, and education. Sprintyper addresses this need by making typing practice fun and engaging through game-based learning, encouraging consistent practice and faster skill development. Users can track their progress over time, gaining motivation and a sense of achievement as their speed improves.

Sprintyper also provides a great way to enhance JavaScript skills. Developing this interactive app involves using core concepts like event handling, asynchronous operations, mathematical logic, and array manipulation to calculate typing speed and track progress. Additionally, it uses localStorage for setting difficulty levels, rendering phrases, and storing scores, ensuring a personalized experience even after browser refreshes.

Tech Stack

HTML5 CSS3 JavaScript

Why did I choose to use these?

These technologies are the base fundamentals of Front-End Web Development. For a project of this size, these technologies are sufficient and efficient. It also presents a good opportunity to practice JavaScript and its capabilities in data handling, event handling, and DOM manipluation.

What challenges did I face?

One challenge I faced was dynamically changing the set of phrases upon completing each one while simultaneously calculating the typing speed for each set. This data needed to be stored in an array to provide calculations for the average typing speed at the end of the game.

How did I tackle these challenges?

To tackle these challenges, I searched for specific examples and implementations similar to my intended application. I researched how and why these features are used effectively and watched YouTube tutorials to gain a deeper understanding and apply these concepts effectively.

Further development

For future development, adding features such as game modes are being considered to expand the scope of the application. One such mode under consideration is 'Blind Mode', where users have a limited time to memorise a phrase or sentence before it disappears. This challenges users to type out the phrase letter-by-letter from memory, improving their cognitive functions, whilst also improving their typing speed.