The Timbu cloud shop is a Simple E-commerce website that allows users to view products, add them to cart and even check the product page. It was given to me during the HNG internship(HNG 11) in July 2024.
Stage 2 FRONTEND TASK: Timbu Cloud shop
Study Material
Learn React and Next(Js/Ts)
Task
In this stage, you'll step outside your individual coding zone and embrace collaboration! Here's the mission:
Find a Designer: Partner up with a designer. This is your chance to showcase your communication and teamwork skills.
Design Implementation: Collaborate with your designer to bring their Timbu Cloud shop page design to life. Translate the design into a functional webpage using React(.tsx/.jsx) / Nextjs(.tsx/.jsx). Make sure there’s a checkout page as well.
Requirements
Collaboration: Effective communication and teamwork with your assigned designer throughout the development process. (you are only allowed to collaborate with a designer, any collaboration with your fellow FE dev will result to instant disqualification).
Technologies: Typescript or JavaScript.
Responsiveness: The website must be responsive and function well on all devices (desktop, tablet,mobile).
The shop page should reflect the designer's vision.
Products should be displayed with clear descriptions and images.
A checkout page checkout process should be implemented.
There will be no functional checkout process at this stage.
All static pages must be implemented.
Acceptance Criteria:
Visual Design: Your implementation must be pixel-perfect and reflect what is on the Figma design. (layout, colors, branding).
Products are displayed clearly with descriptions and images.
Navigation allows users to browse through the shop page.
The page is static (no working checkout process).
The page should be fully responsive and adjust to different screen sizes.
Code Quality: Well-structured, indented, and easy-to-read jsx/tsx code.
Submission Mode:
Submit your task through the designated submission form. Ensure you've:
Hosted the page on a platform of your choice (e.g., Vercel, Netlify).
Double-checked all requirements and acceptance criteria.
Provided the hosted page's URL in the submission form.
Provided a link to the Figma file of the design.
Thoroughly reviewed your work to ensure accuracy, functionality, and adherence to the specified guidelines before you submit it.
Submission Deadline:
The deadline for submissions is Monday, 8 July, at 11:59 PM GMT. Late submissions will not be entertained.
Submit - Submission Form @channel
react.devreact.dev
Quick Start – React
The library for web and native user interfaces (233 kB)
http://react.dev/learn
nextjs.orgnextjs.org
Docs | Next.js
Welcome to the Next.js Documentation. (91 kB)
https://nextjs.org/docs
Google DocsGoogle Docs
HNG Frontend Stage 2 Task Submission (23 kB)
- I used that opportunity to learn Context and complex state management in React
- I enriched my tailwind skills and that even made the site super responsive
- Learnt a new style of importing images in REACT and unique folder structures