React Projects

1: Receipe App View Github code

Tools used in the app.

used React JS for building front end components

React router to route static pages with dynamics routes

styling components dynamically to enhance SEO on a SPA

Used React Hooks for state management

Firebase Authentication with protected routes if not a user

worked with cloud firestore for storing and retrieving data

dynamic url fetch

and deployment to firebase hosting



Route to login/registration if not authenticated


Sign in/ sign up with Google or email


View all recipes loaded from database as JSON data from a fetch API GET


Add a new recipe to the database and load it to the recipe pages


post the form data to the URL fetch using POST method on URL


2: Web App e-commerce app

Tools used: React, context API, Typescript, JavaScript, React Architecture, Firebase authentication and Firestore

link to Github code

3: Building a single-multiple clickable cards and keep tracking of them in a list

see the solution here

/ Implement a feature to allow item selection with the following requirements:

// 1. Clicking an item selects/unselects it.

// 2. Multiple items can be selected at a time.

// 3. Make sure to avoid unnecessary re-renders of each list item in the big list (performance).

// 4. Currently selected items should be visually highlighted.

// 5. Currently selected items' names should be shown at the top of the page.

//

// Feel free to change the component structure at will.