Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hafizn07/frontend-assessment-nextjs
Next.js frontend assessment with responsive Figma design implementation.
https://github.com/hafizn07/frontend-assessment-nextjs
framer-motion nextjs14 reactjs tailwindcss typescript ui
Last synced: 16 days ago
JSON representation
Next.js frontend assessment with responsive Figma design implementation.
- Host: GitHub
- URL: https://github.com/hafizn07/frontend-assessment-nextjs
- Owner: hafizn07
- Created: 2024-10-16T12:43:02.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-10-16T12:53:46.000Z (about 1 month ago)
- Last Synced: 2024-10-18T17:10:17.110Z (30 days ago)
- Topics: framer-motion, nextjs14, reactjs, tailwindcss, typescript, ui
- Language: TypeScript
- Homepage: https://frontend-assessment-nextjs.vercel.app/
- Size: 33.7 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Frontend Assessment - Next.js
Implemented from a Figma design for a Frontend Developer position.
This project showcases my skills in building responsive and user-friendly applications using Next.js.
## 📋 Table of Contents
1. 🤖 [Introduction](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 🔋 [Features](#features)
4. 🤸 [Quick Start](#quick-start)
5. 🔗 [Links](#links)
6. 🚀 [More](#more)
This project is a response to a machine test for the Frontend Developer position, implemented using Next.js, TailwindCSS, and TypeScript. It focuses on creating a responsive and interactive web application based on the provided Figma design.
- **Next.js**: The primary framework for building the application.
- **React.js**: For building user interfaces.
- **TypeScript**: To enhance code quality and maintainability.
- **Tailwind CSS**: For styling the application.
- **Framer Motion**: For animations and transitions.
## 🔋 Features
👉 **Responsive Design**: Ensures the application looks great on all devices.
👉 **Smooth Animations**: Utilizes Framer Motion for engaging animations.
👉 **Interactive UI Components**: Includes user-friendly components based on the Figma design.
👉 **SEO Optimization**: Built with SEO best practices in mind.
👉 **Accessibility**: Implements accessibility standards for a better user experience.
Follow these steps to set up the project locally on your machine.
**Prerequisites**
Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)
**Cloning the Repository**
```bash
git clone https://github.com/hafizn07/frontend-assessment-nextjs.git
cd frontend-assessment-nextjs
```
**Installation**
Install the project dependencies using npm:
```bash
npm install
```
**Running the Project**
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.