Kyosk Frontend Assessment
Table of contents
Overview
The assessment
Users should be able to:
Home Page: Display product categories and featured products.
Product Search: Implement functionality to search for products by name.
Product Details Page: Show detailed information about a selected product.
Categories Page: Display all product categories.
Cart Page: Allow users to view and manage items in their cart.
Checkout Page: Implement a checkout process for completing purchases.
NB Unfortunately I was not able to accomplish the requirements so i just did what I could. Given more time i'm sure i could complete this challenge.
Screenshot
Links
- Live Site URL: Netlify
My process
Built with
- Semantic HTML5 markup
- CSS custom properties
- Mobile-first workflow
- Angular - JS library
- Tailwind CSS - CSS framework
What I learned
- This is my first time ever using AngularJS. Ive learned how to use Angular components, services, routes, API calls and context.
- How to use Tailwind v4 with Angular 19+. There were a few hiccups setting it up.
Continued development
- Angular service workers
- Angular testing
- Making API calls with Angular JS
- Managing state in Angular and services
Useful resources
- AngularJS Crash course video on youtube - This helped me learn the basics of angular. Tutorials on Angular are quite few on YouTube so it was nice to find a relatively short but understandable one.
- AngularDocsTutorials - The official docs of Angular have up to date simple tutorials
Author
- Website - Shem Jaoko
Installation
prerequisites
Ensure you have the following installed on your system:
Node.js (LTS recommended) Angular CLI Git
Installation-steps
Clone the repository:
git clone <repo-url>
cd <repo-name>
Install dependencies:
npm install
Start the development server:
npm run dev
The app should now be running at http://localhost:4200/.
Build for Production To create a production build, run:
npm run build
This will generate the compiled files in the dist/ directory.
