This application is a landing page built using Next.js that fetches and displays a list of Capsules from the SpaceX API. The dashboard includes various features that enhance the user experience while interacting with the capsule data.
- Fetches data from the SpaceX API and displays it in a PrimeReact table.
- Supports pagination, showing 5 items per page for easy navigation.
- Each row in the table includes an "Edit" button that allows users to edit the entry locally without sending updates to the API.
- Implements a search form using Formik to handle the form state.
- Users can filter the table based on three attributes: status, original launch date, and type of the Capsules.
- The search functionality is fast and accurate, providing relevant results in real time.
- Features a form built with Formik for adding new Capsules to the local state.
- The form is validated using Yup, ensuring that all required fields are filled out correctly.
- Newly added entries appear immediately in the table after submission, without sending any data to the SpaceX API.
- Each row has an "Edit" button that populates the form with existing data, allowing users to update the capsule details.
- Uses Formik to manage form submission and validates fields with Yup before updating the local state.
- Clicking on an item in the table displays a popup/modal with full details of the selected capsule, providing an enhanced view of the information.
Here's the video walkthrough link: Video Walkthrough
Live link of the project: Live Link
Github Repository: Github Repository
- Clone the repository and navigate to the project directory.
- Install the required dependencies:
npm install
Then, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.