Welcome to the HUH Coffee project! ☕️
At HUH Coffee, we’re all about making your coffee moments unforgettable. Whether you're into bold, intense dark roasts, or prefer the bright and lively flavors of light roasts, we've got you covered. And let’s not forget our awesome coffee accessories — because every coffee lover deserves the best tools to brew perfection.
Our sleek, easy-to-navigate website is designed to give you the smoothest shopping experience possible. No clutter, no fuss — just great coffee and the accessories you need to brew it right.
🔐 Login & Registration: Secure and simple authentication system to get you brewing in no time.
🏠 Main Page: A clean and engaging landing page that welcomes users with featured products and key highlights.
📋 Product Catalog: Browse dark roasts, light roasts, and coffee gear with intuitive filtering and category navigation.
🔎 Detailed Product View: Get up close with every item — descriptions, specs, and rich visuals to help you choose your perfect cup.
🛒 Basket Page: Add, edit, and manage your picks with a dynamic and responsive shopping cart.
👤 User Profile: Manage personal info, order history, and preferences in one simple, accessible space.
💅 About Us: Learn more about our mission, vision, and the story behind HUH Coffee.
This project is the final task for the JavaScript/Front-end 2024Q4 course at Rolling Scopes School. It showcases the skills and knowledge gained throughout the program — from responsive layout and interactive UI to modern development practices and clean code.
-
Frontend: Developed with TypeScript, HTML, CSS, and modern-normalize — delivering a responsive, clean, and consistent UI 🎨
- UI Utilities: Enhanced with Swiper for touch sliders and toastify-js for elegant notifications ✨
- Utility Library: Lodash for modern JavaScript utilities 📚
-
Backend Integration: Powered by CommerceTools, a leading provider of commerce solutions for B2C and B2B enterprises 🌐
- Validation: Postcode validator for address validation 📮
-
Bundler: Uses Vite for lightning-fast builds, HMR, and a modern development workflow ⚡
-
Testing: Ensures reliability with Vitest 🧪
-
Code Quality: Maintained through tools like ESLint, Prettier, Stylelint, Perfectionist, EditorConfig, and Husky ✅
- Git Hooks: validate-branch-name for consistent branch naming 🌿
-
CI/CD & Deployment: Automations handled with GitHub Actions, and live deployment on Netlify 🚀
-
Architecture: While we haven’t committed to a specific architecture, we follow a component-based structure and aim to avoid unnecessary complexity, keeping things as simple and maintainable as the scale of the e-commerce application allows 🧩
-
Clone the repository:
git clone https://github.com/asfound/ecommerce-application.git -
Navigate to the project directory:
cd ecommerce-application -
Install dependencies:
npm install -
Create a
.envfile in the root directory and add your environment variables (CommerceTools credentials):
VITE_CTP_PROJECT_KEY=<project key>
VITE_CTP_CLIENT_SECRET=<client secret>
VITE_CTP_CLIENT_ID=<client id>
VITE_CTP_AUTH_URL=<auth url>
VITE_CTP_API_URL=<api url>
VITE_CTP_SCOPES=<scopes>
- Run the project:
npm run dev
The application should now be available at http://localhost:5173 🚀
| Command | Description |
|---|---|
npm run dev |
Initiates the Vite development server |
npm run build |
Compiles TypeScript and builds the app using Vite |
npm run preview |
Serves the production build locally via Vite |
npm run lint |
Fixes lint issues in .ts files using ESLint |
npm run lint:check |
Checks for lint issues without fixing |
npm run format |
Formats code in ./src using Prettier |
npm run format:check |
Checks code formatting with Prettier |
npm run stylelint |
Fixes style issues in .css files using Stylelint |
npm run stylelint:check |
Checks .css files for style issues |
npm run test |
Runs all unit tests using Vitest |
npm run test:coverage |
Runs tests and generates a coverage report |
npm run prepare |
Initializes Husky for Git hooks |
- 💅 Ksenia Gorina / asfound
- 💅 Alena Radomskaia / radomskaia
- 💅 Grim / ripetchor