Baby Steps Internship Project

ℹ️ This is a web application built using Next.js.

This project retrieves user information from an external API endpoint and displays them in a paginated table. It also offers a search feature that enables users to filter the user list by name or email. Additionally, the project uses server-side rendering to improve performance and SEO.

If you wish to learn about the specific code used in this project, please refer to the Explanation.md file.

---

🔥 Deployed Link

This project is hosted on Vercel Platform. Visit the following link to view the web application.

https://baby-steps-rho.vercel.app/

---

✅ Guidelines to run web app locally

• For this app to work, Use these commands to run the application

# to install dependencies 
npm install

# to run the server
npm run dev

• Open http://localhost:3000 with your browser to see the application.

---

📂 Folder Structure

A quick look at the folder structure of this project.

.
|──node_modules
|──next.config.json
|──jsconfig.json
|──.eslintrc.json
|──package-lock.json
|──package.json
└── components
    └───user
        └───userList.js
        └───userList.module.css
└── data
    └───userStats.json
└── models
    └───userModel.js
└── pages
    └───api
        └───user
             └─[id].js
    └───_app.js
    └───_document.js
    └───404.js
    └───index.js
└── public
    └───static
        └──404.png
        └──BabySteps.jpg
└── styles
    └──404.module.css
    └──globals.css
    └──user.module.css
    └──Home.module.css

---

✨ Features

• Fetch user details from external API
• Display users in a paginated table
• Search functionality to filter users by name or email
• Dynamic user route with complete details at /user/:id
• Server-side rendering for improved performance and SEO
• Ensure that the interface is completely responsive across all devices using media queries.
• Includes a custom 404 error page

---

Frameworks & Tools

---

💻 User Interface

Start Screen

Dynamic User Details Page