Density Exchange - Frontend UI Intern Task

This project is a part of the application for the Frontend UI Intern position at Density Exchange. The goal of this project is to develop a webpage with animation based on a provided design using Next.js and the chosen CSS library (Tailwind CSS, SCSS or Material-UI).

Overview🌐

• Replicated the design from Dribbble - Ahead App Redesign Concept with animations.
• Utilized Next.js for building the project, providing server-side rendering capabilities and optimized performance.
• Leveraged Tailwind CSS for styling the components, ensuring a responsive and visually appealing UI.

Deployment🚀

The project is deployed and can be accessed here.

Video Demonstration📹

For a demonstration of the project, please watch the video here.

Tech Stack⚙️

• Frontend Framework: Next.js
• CSS Library: Tailwind CSS

Project Structure📂

• public: Folder containing images and SVGs used in the project.
• src: Source code folder.
  • app: Main application files.
  • components: Reusable React components.
• .eslintrc.json: ESLint configuration file for code linting.
• .gitignore: Specifies files that should be ignored by Git.
• .jsconfig.json: Configuration file for JavaScript projects using VSCode.
• next.config.js: Configuration file for Next.js.
• package.json: Project metadata and dependencies.
• package-lock.json: Lock file for npm dependencies.
• postcss.config.js: Configuration file for PostCSS.
• tailwind.config.js: Configuration file for Tailwind CSS.

Deployment🚀

The project is deployed and can be accessed here.

How to Run▶️

1. Clone the repository:

   git clone https://github.com/Stutimaha/Ahead-App-Redesign
   cd Ahead-App-Redesign
   

2. Install dependencies:

   npm install
   

3. Run the development server:

   npm run dev
   

4. Open your browser and visit http://localhost:3000 to view the application.

Task Completion✅

The project successfully implements the provided design with animations using Next.js and Tailwind CSS. Components are organized in the src/components folder, and the overall project structure adheres to best practices.

Contact📧

• LinkedIn: Stuti Mahajan
• Email: [email protected]