Dummy Web App

Description

The Dummy Web App was generated using the latest Next.js version at the time of creation, which is version 13. This app incorporates a well-organized folder structure and reusable components, offering different ways to handle various UI scenarios.

The project follows the best practices and leverages Tailwind CSS for all its stylings. While creating the project, utmost care has been taken to adhere to the standards set by the community. However, there is always room for improvement in the code, and future contributions are welcome to make it even better.

The project also takes full advantage of the latest features of Next.js, including new ways of routing, handling server-side and client-side components, and more. All components are designed to be easily connected with APIs, allowing for seamless integration or any other necessary changes through dynamically coded components.

To visit the web app

Please refer this link for the web app

GitHub Tags

• ❄️ React
• 📦 Next.js
• 🎨 Tailwind CSS

Figma Design

Please refer this link for the Figma UI design

Steps to Run the Project

Follow these steps to get the Dummy Web App up and running:

1. Clone the repository using the following GitHub link: LINK FOR THE PROJECT

2. Install the dependencies for the Next.js app by running the following command in your terminal:

npm install

3. To run the project. Run the following command:

npm run dev

Features

Here are the features implemented in the project:

1. Project Setup and Configuration

   • Created scaffolding for the dummy Next.js app.
   • Added support for Tailwind CSS.
   • Integrated TypeScript support.
   • Incorporated Eslint for code linting.
   • Restructured the source folder to the app folder.
   • Created a constants folder to handle app-wide constants.
   • Fixed configuration files.

2. Asset Management

   • Added PNG images for the card.
   • Included SVG icons for the card.
   • Added images for the about container.
   • Added a full image for the hover part of the about container.

3. Components

   • Added an about container blueprint.
   • Added an accordion container blueprint.
   • Developed a card container with a card list component and card component.
   • Created a header component with a navbar and the web app's logo.
   • Added a horizontal strip component.
   • Implemented a responsive accordion component with expand and collapse actions.

4. Responsive Styling

   • Implemented responsiveness for various components, including the navbar and about container.
   • Added animations using Tailwind CSS.
   • Updated infinite scroll logic for better user experience.

5. Navigation and UI Fixes

   • Dynamically show page titles in the header.
   • Introduced a title prop for unique cases in the header.
   • Fixed the overlapping issue in the accordion using relative positioning and z-index.
   • Added new pages for the navigation links.

These changes collectively bring significant enhancements to the project, such as improved code structure, design, and user interactivity.