Skip to content

deglan-rivas/frontend-ts-recipeFinder

Repository files navigation

Recipe Finder

Solo Frontend

📜 Description

  • Due to its practicality, Vite was chosen to initialize, minify, and create the production bundle.
  • TypeScript was employed to enhance code quality with static typing and improved developer tooling.
  • React, TailwindCSS were used to quickly layout complex components.
  • ShadcnUI was utilized for providing a set of accessible and customizable UI components based on Tailwind.
  • Zod was used for schema validation to ensure the correctness of data structures.
  • React-router-dom was employed to handle routing within the React application, enabling navigation between different components and views.
  • The project is deployed on Netlify. Additionally, the final code is dockerized for local testing.
  • Update1 - release/migrate_zustand: Implemented Zustand for state management to handle complex application states efficiently.
  • Update2 - release/add_testing: Added testing frameworks React Testing Library, Jest, and Mock Service Worker for unit and integration testing.

🚀 Getting Started

Online Version

Use this link to try the code deployed on Netlify.

Local Version

  1. Run the following commands for Linux. You must have Docker and its post-installation set up beforehand.
# Download the latest image from DockerHub:
docker pull deglanrivas/frontend-ts-recipefinder:latest

# Create a container based on that image:
docker run --rm -d -p 8080:80 --name demo_container deglanrivas/frontend-ts-recipefinder:latest
  1. Open http://localhost:8080 in your browser to see the result 🚀

  2. Once the test is complete, remove the image and container:

# Stop the containers:
docker stop demo_container && docker rmi deglanrivas/frontend-ts-recipefinder:latest

# Verify they were correctly removed:
docker images
docker ps -a