React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Overview

This application is a robust Student Management System built with modern web technologies and cloud services. It provides a user-friendly interface for managing student information efficiently and securely.

Key Features

1. Student Registration: Add new students to the system with a comprehensive form.
2. Data Collection: Capture essential student details including Student ID, First Name, Last Name, Email, and Date of Birth.
3. Form Validation: Implement rigorous data validation to ensure accuracy and completeness of student information.
4. User Authentication: Secure access to the system using AWS Amplify authentication services.
5. Responsive Design: Utilize Material-UI for a clean, modern, and mobile-friendly user interface.
6. Date Handling: Incorporate an intuitive date picker for selecting student's date of birth.
7. Loading States: Provide visual feedback during form submission and data processing.
8. Error Handling: Display clear error messages for form validation and submission issues.
9. Student Deletion: User can delete a student entry from the system.

Technology Stack

Frontend

• React: Core library for building the user interface
• Material-UI (MUI): UI framework for responsive and attractive design
• Formik: Form state management and submission
• Yup: Schema validation for form inputs
• Day.js: Date manipulation and formatting
• UUID Generator: Generation of unique identifiers

Backend and Cloud Services (AWS)

• AWS Amplify: Core service for backend functionality
• Amazon Cognito: User authentication and authorization
• AWS AppSync: GraphQL APIs and real-time data synchronization
• Amazon DynamoDB: NoSQL database for data storage
• Amazon S3: File storage service

Development Tools

• ESLint: Code quality and style checking
• Prettier: Code formatting
• Webpack: Module bundling
• Babel: JavaScript compilation

Application Structure

The application is structured around a main form component (AddStudentForm) which handles the creation of new student records. This component integrates various Material-UI elements, form validation logic, and state management to provide a seamless user experience.

User Flow

1. User authenticates using AWS Amplify services
2. Upon successful login, user can access the student management interface
3. User can add new students by filling out the registration form
4. Form inputs are validated in real-time
5. On submission, data is processed and stored in the backend
6. User receives feedback on successful submission or any errors encountered