Frontend UI Intern Task - Density Exchange

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).

Project Overview

Density Exchange is a premier trading platform for cryptocurrencies, and this project aims to create a visually appealing and functional webpage to enhance the user experience.

Tech Stack

• Frontend Framework: Next.js
• CSS Library: SCSS
• Animation Library: Framer Motion

Features

• 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 SCSS (or Material-UI) for styling the components, ensuring a responsive and visually appealing UI.
• Employed Framer for animation effects to enhance user engagement.

Project Structure

The project is organized as follows:

• src/: Contains the main application code.
  • app/: Includes the Next.js pages for the application.
  • assets/: Contains static assets like images and fonts.
  • components/: Contains reusable React components.
  • constants/: Contains application-wide constants.
  • containers/: Contains container components.
  • utils/: Contains utility functions and helper files.
• public/: Contains static assets like images and fonts.

Getting Started

1. Clone this repository to your local machine.

   git clone https://github.com/devprashantt/density-exchange

2. Install the project dependencies.

   npm install

3. Start the development server.

   npm run dev

4. The application will be running at http://localhost:3000.

Deployment

The project has been deployed on Netlify/Vercel for easy access and review.

Evaluation Criteria

The project is evaluated based on the following criteria:

1. Quality of the UI/UX design.
2. Code quality and organization.
3. Effective use of Next.js features.
4. Responsiveness and visual appeal.
5. Animation implementation using GreenSock.

Contact Information

If you have any questions or need further information, please feel free to contact me:

• Email: [email protected]
• LinkedIn: https://www.linkedin.com/in/devprashantt/

Thank you for considering my application. I look forward to your feedback and evaluation.

Best regards, Prashant Kumar Singh