React JS Project

This repo contains the course project I did throughout the React JS course which is part of the Full Stack Web Developer Program at Business College Helsinki. Here is a link to the initial design on Figma. You can see the live demo here.

Technologies used

Built with:

• HTML
• JS
• CSS
• Reactjs 17

Hosted on:

• Netlify

Setup and Usage

Inside the root, with Node 16 run:

npm install
npm run start

To deploy run, with netlify-cli:

netlify deploy

Sources & Attributions

• The data comes from an API I created in my Programming in PHP course. You can see the API repo here.
• Most pictures are courtesy of Johann Trasch from cocktailbar.de.
• Arrow Icon by BECRIS on freeicons.io.

Acknowledgment

Mentor: Margit Tennosaar

• GitHub @margittennosaar
• LinkedIn

Task List

Task 01 - Building the base app

• Make a clean create-react-app
• Clean it and start to work with it
• Make App, Header, Main, Footer, Nav, Home, Recipes, About components
• Using React Router set up simple navigation with three pages – home, recipes, about
• Start styling your app

Task 02 - Create a development database

• Create a json file which contains some recipes
• Have a new page “Recipes” – where GET list of all recipies from db.json
• In Recipes page, include a search for your recipes
• Make meaningful commits, so teacher can see what you have been doing there
• Post your project GH link to group Teams wiki

Personal Task List

• Have a placeholder for images that are still loading
• Add a reset button next to the search bar on the recipe page
• On mobile, visually indicate horizontal scrolling and seperate categories