Figma to Next.js + TailwindCSS Exercise
This project is a response to a take-home assignment provided by NoxuData as part of the interview process. The assignment involved developing a portion of a design provided in Figma using Next.js, TypeScript, and Tailwind CSS.
Figma Design
The design file was provided by NoxuData. It included various components and styles that needed to be implemented into a functional web application.
Technologies Used
Next.js: Next.js was chosen as the framework for building the web application due to its ease of use, server-side rendering capabilities, and excellent developer experience.
TypeScript: TypeScript was utilized to bring static typing to the project, enhancing code quality and developer productivity.
Tailwind CSS: Tailwind CSS was the chosen utility-first CSS framework for styling the components. Its utility classes allowed for rapid styling without the need for writing custom CSS.
Implementation Details
Button Components: Implemented the button components as per the provided design. While the buttons are not functional in this exercise, they are styled and structured according to the design specifications.
Folder Structure: Organized the project structure following best practices for Next.js applications, separating components, pages, and styles into their respective directories.
Type Definitions: Utilized TypeScript to define types for props, ensuring type safety and better code documentation.