Front-End Project Challenge Rebootkamp

This project 24hours Rebootcamp challenge aimed at implementing a medium-level front-end task.

In this README, I will outline what has been accomplished in this project, including state management, responsive design, preview image functionality, data validation, and image conversion to base64.

Project Overview

This front-end project challenge focused on developing a responsive web application with the following features:

• State Management:

  • Utilized React Context API for efficient management of application state, This ensures data consistency and a smooth user experience.

• Responsive Design:

  • Implemented a responsive design using Tailwind CSS to ensure that the application is user-friendly and visually appealing across various devices and screen sizes.

• Preview Image Ready:

  • Developed a feature that allows users to preview uploaded images before finalizing their selection. This enhances the user experience by providing visual feedback.

• Data Validation:

  • Implemented data validation to ensure that user inputs are accurate and meet specified criteria. This includes error handling for invalid inputs.

• Image Conversion to Base64:

  • Integrated functionality to convert uploaded images to base64 format using Tailwind CSS. This enables efficient storage and transmission of image data within the application.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

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

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

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!

Deploy on Vercel

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.

License

This project is licensed under the MIT License, See the LICENSE.md file for details