From Scratch

C6 Lab Grown Diamonds

A B2B-focused e-commerce website for lab-grown diamonds, designed to support wholesale and business buyers with fast performance and a clean, professional UI.

Industry:B2B E-commerce / Jewellery and Diamond
Duration:Jan 2023 - Mar 2024
Team Size:4 members
Our Role:Junior Frontend Developer

Project Overview

C6 Lab Grown Diamonds is a B2B web platform built to serve wholesale and business clients dealing in lab-grown diamonds. The goal of the project was to create a responsive, SEO-friendly frontend that allows business users to browse diamond collections efficiently. As a Junior Frontend Developer, I worked on implementing UI pages and reusable components using React.js and Next.js under senior guidance. The project emphasized clean layouts, performance optimization, and consistency across devices to ensure a professional B2B buying experience.

Quick Facts

Client
C6 Lab Grown Diamonds
Timeline
January 2023 - March 2024
Technologies
React.jsNext.jsJavaScriptTailwind CSS

Project Timeline

1
2 weeks

Requirement Understanding & UI Setup

Understood project requirements, B2B user flow, and UI design guidelines.

2
2 months

Core Page Development

Developed responsive pages such as Home, Collection, and Product Listing pages.

3
1.5 months

Component Development

Built reusable UI components following coding standards.

4
1 month

Testing & Refinement

Fixed UI issues, improved responsiveness, and refined layouts.

5
2 weeks

Final Review & Deployment Support

Supported final testing, bug fixes, and deployment readiness.

Delivering a consistent and responsive B2B UI within a limited team size

Understanding a large production codebase as a junior developer was challenging. Maintaining UI consistency and responsiveness across devices required attention to detail. Coordinating changes efficiently within a small team was also important.

Understanding existing frontend architecture
Maintaining consistent UI design
Responsive layout implementation
Performance-friendly UI development
Following coding standards
Effective team collaboration

Component-based frontend development with performance-focused practices

Followed established coding standards and reusable component patterns. Used Tailwind CSS and Bootstrap to build responsive and clean layouts. Worked closely with senior developers to improve UI quality and performance.

Architecture Overview

The project used a component-based React architecture with Next.js. Pages were structured for SEO-friendly rendering, and data was fetched via REST APIs.

Our Approach

Reviewed UI designs and business requirements
Followed existing project structure
Built responsive layouts using Tailwind CSS
Implemented reusable UI components
Integrated API-driven data into UI
Handled loading and empty states
Fixed UI bugs and layout issues
Performed cross-browser testing
Refactored code based on feedback
Ensured clean and readable code

Results & Impact

100%
Responsiveness
Fully responsive UI across desktop and mobile devices
High
UI Consistency
Consistent design across all pages
Improved
Page Experience
Smooth navigation and clean layouts for B2B users
Improved
Code Quality
Better maintainability through reusable components
Effective
Team Collaboration
Smooth coordination within a small team of 4 members

Key Outcomes

Successfully delivered a B2B frontend website
Improved product browsing experience for business users
Responsive and professional UI
Reusable component structure
Stable and maintainable frontend code
On-time delivery of frontend features

Technical Stack

Frontend

React.jsNext.jsJavaScriptHTML5Tailwind CSSBootstrapshadcn/ui

Backend

REST APIs

Database

API-driven data

Infrastructure

Not directly managed

Integrations

Product and inventory APIs