Coffee Roasters

Tech Stack : React | TypeScript | Tailwind | Framer Motion

Welcome to my first website built with Tailwind CSS!
This project was an exciting journey where I learned a lot about responsive design, animations, and managing React states.

Overview

Link : https://coffee-roaster-theta.vercel.app/
This project showcases my ability to build a responsive and visually appealing website using Tailwind CSS and Framer Motion for animations.
I tackled several challenges along the way and gained valuable insights into planning and organizing a design system.

Features

• Responsive Design: Utilized Tailwind CSS to create a fully responsive website.
• Animations: Integrated Framer Motion to add smooth animations.
• Form Handling: Implemented form functionality with efficient state management in React.

What I'm Proud Of

Creating this website was a significant milestone for me. I'm particularly proud of:

• The overall design and responsiveness.
• Successfully incorporating animations with Framer Motion.
• Figuring out solutions on the fly and learning new techniques.

Lessons Learned

Through this project, I encountered and overcame several challenges:

• React State Management: Understanding that React retains the previous state and learning to use useEffect to keep the form selections updated.
• Tailwind CSS Setup: Realizing the importance of pre-defining brand colors and fonts for an easier and more efficient design process.

Feedback

I welcome all feedback! Please feel free to share your thoughts and suggestions.

Installation

To get started with this project, clone the repository and install the dependencies:

git clone https://github.com/yourusername/your-repo-name.git
cd your-repo-name
npm install

Thanks to...

This is project was made using Frontend mentor figma files and assets.