Demo URL's

• Live Website
• Github Repository

Project Brief

Summary

The project is a comprehensive JavaScript component library that showcases various UI components sourced from diverse online challenges and courses. It's a testament to an individual's journey in frontend development, and a platform for others to witness the potential of these UI components.

Goal Details

• Display and categorize UI components from various challenges and courses.
• Offer a seamless user experience to navigate through the different UI components.
• Serve as a learning tool and portfolio to showcase frontend skills.

Target Audience

• Recruiters or employers looking to hire frontend developers.
• Developers seeking inspiration or references for frontend components.
• Students or beginners in frontend development.

Promise

A unified platform showcasing diverse frontend components with a focus on learning and practical implementation.

Architecture

Modula architecture with monorepo tech-stack pattern structuring, components grouped based on their source (courses, challenges, personal ideas). The dashboard, which lists all the components, is the entry point for users.

Infrastructure

The project leverages Docker and Docker Compose for local development and API provisioning, while AWS EC2 is employed for API hosting.

Tech Stack

• Frontend: Next.js (SSG), Handlebars (HTML templating), SCSS, and JS.
• CI/CD: Github Actions.
• Hosting: GitHub Pages, AWS S3.

System Design (RADIO Framework)

Requirements Exploration

Functional Requirements

1. List and categorize UI components based on their source.
2. Allow seamless navigation between different components.
3. Display detailed information about each component.

Non-Functional Requirements

1. High performance with fast load times.
2. Scalability to add more components in the future.
3. Responsive design for diverse devices.

What I learned

• Proficiency in creating modular frontend projects.
• The importance of optimizing for performance in frontend design.
• Integration of diverse frontend technologies to achieve a unified solution.

Post-MVP Improvements (Continued Development)

Functional Improvements:

1. Search functionality for components.
2. User reviews or comments on each component.

Non-Functional Improvements:

1. Further enhancements in loading speed.
2. More granular categorization of components.

Author

• Website - Paul Serban
• Frontend Mentor - @paulAlexSerban
• Github - paulAlexSerban

Acknowledgments

Huge thanks to the platforms like Udemy, FreeCodeCamp, and others for their invaluable resources and challenges that paved the way for this project.