Educase PopX is a high-fidelity, mobile-first web application built to mirror a premium mobile app experience. Developed using React 19 and Tailwind CSS 4, this project demonstrates modern frontend practices, including state management, real-time form validation, and protected routing.
The application focuses on a seamless User Journey: from a vibrant landing page to a detailed registration process, followed by secure authentication and a personalized user profile.
Tip
Live Demo: https://educase-project-topaz.vercel.app/
- 📱 Mobile-First Design: Optimized for mobile viewports while maintaining a centered, professional layout on larger screens.
- 🛡️ Secure Authentication: Full Login/Registration flow with data persistence using
localStorage. - ✅ Real-time Validation: Advanced form validation using Regex for Email and Phone numbers with instant user feedback.
- 🔒 Protected Routes: Secure user profile page that redirects to login if the user is not authenticated.
- ✨ Smooth UX: Integrated
react-hot-toastfor beautiful notifications andreact-router-domfor seamless navigation.
- Framework: React 19
- Styling: Tailwind CSS 4
- Routing: React Router 7
- Build Tool: Vite 8
- Notifications: React Hot Toast
- Linting: ESLint
src/
├── assets/ # Static assets & images
├── Components/ # Reusable UI components (ScrollToTop, etc.)
├── Pages/ # Application screens (Home, Login, Registration, Profile)
├── utils/ # Helper functions & utilities
├── App.jsx # Main routing & application layout
└── main.jsx # Application entry point-
Clone the repository:
git clone https://github.com/Rika4698/Educase-Project.git
-
Navigate to the project directory:
cd Educase-Project -
Install dependencies:
npm install
-
Start the development server:
npm run dev
Developed by Sharmin Akter Reka