❄️ Open in App Frontend Assignmnet

🚀 Deployed App

Access the deployed app at https://candid-sprite-c800d2.netlify.app/.

✨ Run on your Local

• ⬇️ For Running this repository on a local
• ⬇️ Frontend - cd to open-in-app > npm install > npm run dev

🎉 Features

• Sign in using your Google account.
• Upon successful sign-in, you will be redirected to a dashboard page.
• Select a .CSV file by either browsing for it or dragging and dropping it into the specified input area. CSV File - Try to input this
• The chosen file's name will be shown in the input component.
• Click the upload button, initiating a loading spinner.
• After a successful upload, the CSV file will be rendered, and the entire component will be displayed according to the structure defined in the CSV file.

🃏 Glimse of Project ⏬

video

mainrecording_1fJC3jcG.mp4

Responisve

💎Important Concepts .

• Usage of custom icon components for UI elements, enhancing reusability and consistency.
• Integration of Tailwind CSS for styling, providing a responsive and visually appealing design.
• Effective use of React hooks, such as useState and useEffect, for state management.
• Conditional rendering is implemented based on certain conditions
• props and state is utilized to pass data between components and manage local component state.
• localStorage to store and retrieve data locally, preserving user login information.
• Implementation of Firebase authentication for signing in.
• React Router is used for navigation between different pages in the application.
• Utilization of Tailwind CSS for responsive design, with screen size breakpoints.

💜 Tech Stack .

• React JS
• Tailwind CSS
• Firebase
• Papaparse Library for parsign the csv .
• React router dom .

📃 Documentation -

• ⬇️ React Router Dom - https://reactrouter.com/en/main/start/tutorial
• ⬇️ Tailwind CSS - https://tailwindcss.com/docs/
• ⬇️ Firesebase - https://firebase.google.com/docs/auth
• ⬇️ PapaParse - https://www.npmjs.com/package/papaparse

📩 Mail me : [email protected]