Carousel Component - Stoppers Assignment

This project implements a carousel component based on the design provided in the Figma file. Though the assignment specifies HTML, SCSS, and JavaScript, I utilized Next.js, React, Tailwind CSS, and TypeScript to showcase my proficiency in modern frontend frameworks and enhance the efficiency of the development process.

The project is deployed on Vercel for easy access and review.

Project Overview

This is a responsive and fully functional carousel component. It smoothly transitions between slides, adhering to the design in the provided Figma file. The component is modular, scalable, and easy to maintain.

While the initial task was based on HTML, SCSS, and JavaScript, I opted for Next.js and Tailwind CSS to leverage their efficiency in handling UI components, responsiveness, and performance.

Technologies Used

• Next.js: For the base framework.
• React: For component-based UI development.
• Tailwind CSS: To implement responsive and scalable styling.
• TypeScript: To ensure type safety and catch potential errors during development.
• Vercel: For deployment and hosting.

Project Structure

The project follows a typical Next.js folder structure: ├── components/ ├── data/ ├── public/images/avatars/#png images ├── app/fonts,

Running the Project Locally

1. Clone the repository: ``git@github.com:yanniro2/code-evaluation-task.git

2. Install dependencies: ``npm install

3. Start the development server: ``npm run dev

4. Open http://localhost:3000 to view the carousel in your browser.

Design Implementation

• Poppins font is imported from Google Fonts, and Recoleta font is imported locally as provided.
• The carousel transitions are smooth and follow the design specifications.
• The project is fully responsive, ensuring compatibility across different screen sizes.
• SCSS principles like DRY, and variables for colors and spacing are integrated through Tailwind's utility-first approach.
• BEM methodology is applied to ensure organized and maintainable class naming.

Assumptions & Decisions

• Although the task requested SCSS, I chose Tailwind CSS for quicker responsiveness and maintainability.
• The carousel state and behavior are managed using React's state and hooks, instead of plain JavaScript classes, for easier scalability.
• I chose Next.js to streamline the project setup and simplify deployment to Vercel.

Deployment

The project is deployed on Vercel and can be accessed here.

Contact

Feel free to reach out for any questions or feedback.

• Niroyan Kugaruban portfolio.