https://github.com/9802hemensan/growmeorganic_react

React Internship Assignment
https://github.com/9802hemensan/growmeorganic_react

localstorage material-ui react-router-dom-v6 reactjs vite-app

Last synced: about 1 month ago
JSON representation

React Internship Assignment

• Host: GitHub
• URL: https://github.com/9802hemensan/growmeorganic_react
• Owner: 9802HEMENSAN
• Created: 2023-08-18T13:21:19.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-19T06:01:16.000Z (over 1 year ago)
• Last Synced: 2024-11-08T13:12:38.175Z (3 months ago)
• Topics: localstorage, material-ui, react-router-dom-v6, reactjs, vite-app
• Language: TypeScript
• Homepage: https://growme-organic-hemensan.netlify.app/
• Size: 76.2 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Internship Assignment: Vite Application

 Explore the culmination of my React Internship Assignment—a dynamic Vite application. Witness Vite's speed and MUI's elegance harmonize to craft an exceptional user experience. From user data management to intricate UI components, this project showcases my React proficiency. Dive in and experience innovation in action.

## Completed Tasks

### Task 1: Application Configuration

I successfully created a new React application using Typescript and Vite. I configured the application with MUI by following the [MUI getting started guide](https://mui.com/material-ui/getting-started/overview/).

### Task 2: First Page of the Application

I implemented a user information form on the first page. The form collects the user's Name, Phone number, and Email. After completing the form, the user's details are saved in local storage. I also implemented routing to the second page and ensured that users are redirected back to the first page if they access the second page without providing necessary information.

### Task 3: Second Page of the Application (Component 1)

I successfully fetched a list of JSON data from an API (e.g., https://jsonplaceholder.typicode.com/posts). I converted the JSON data into TypeScript models/interfaces and displayed the data in a table using the [MUI Data Grid](https://mui.com/x/react-data-grid/).

### Task 4: Second Page of the Application (Component 2)

I created a new component to display department and sub-department information. I used the provided JSON data (https://docs.google.com/document/d/1uQCFny5aXfMD9v2TPy3rbE8EHw-xZVdZfj4g-2Yv6IU/edit?usp=sharing) and successfully implemented the expand/collapse functionality for sub-departments. Users can select departments and sub-departments, and the UI handles automatic selection of related items according to the requirements.

## Deployment

I have deployed the completed application to a hosting provider. You can access the deployed application using the following URL: [Deployed Application](insert_deployed_url_here).

## Submission

I have followed the submission steps as instructed:

1. I pushed the code to a GitHub repository: [GitHub Repository](insert_github_url_here).

2. I deployed the application using a hosting provider.

3. Here are the URLs for my submission:

   - GitHub URL: [GitHub Repository](insert_github_url_here)

   - Deployed Application URL: [Deployed Application](insert_deployed_url_here)

## Conclusion

I thoroughly tested the application to ensure its functionality and to fix any potential issues. I focused on code quality, maintained proper file structure, and ensured a high level of attention to detail throughout the project. I hope my submission meets your expectations, and I am eager to receive your feedback.

Thank you for this opportunity, and I look forward to your review!