🎓 H-One Academy

A modern, responsive, and feature-rich online learning platform
Built with React, TypeScript, Vite & TailwindCSS

A full-featured e-learning platform with complete user panel, course management, articles, reservations, likes, ratings, and profile management.

---

🌟 About The Project

H-One Academy is a complete online learning platform designed and developed to deliver a smooth, modern, and practical learning experience. This project includes:

• 🎯 Professional landing page with course & article sliders
• 📚 Course listing with filtering, search, pagination, and sorting
• 📰 News & articles with rating and comment system
• 👤 Complete user panel with profile management
• 🔐 Multi-step authentication system (Register / Login / Forget Password)
• 🌗 Dark / Light / System theme support
• 📱 Fully responsive and optimized for mobile & desktop
• 🇮🇷 Full RTL support and Persian language

---

🚀 Live Demo

🔗 https://behshahr.vercel.app

---

✨ Key Features

🏠 Landing Page

• Hero slider
• Academy services
• Statistics section
• Educational categories
• Courses & articles sliders
• Instructors section
• Suggestions & feedback form
• Contact us form

📚 Courses

• Responsive grid layout
• Filter by technology, level, type, price
• Fast search
• Advanced pagination
• Course details page
• Like / Dislike / Rating
• Course reservation
• Comments section with submission

📰 Articles

• Responsive grid
• Filtering and search
• Rating and likes
• Article details page
• Comment system

👤 User Panel

• 📊 Statistical dashboard with charts
• 👥 Full profile editing
• 🖼️ Upload / select / delete profile images (Slider gallery)
• 📖 My Courses
• 🎫 Reserved Courses
• ❤️ Favorite Courses
• 💬 My Comments

🔐 Authentication

• Login with email or phone number
• 3-step registration:
  1. Submit email + phone number
  2. Verify sent code
  3. Set password
• Password recovery via email link
• Protected Routes for user panel

🎨 UI/UX

• Light / Dark / System theme
• Smooth animations
• Loading skeletons
• Toast notifications
• Beautiful modals
• Fully RTL

---

🛠️ Tech Stack

Category	Technology
Framework	React 18 + TypeScript
Build Tool	Vite
Styling	Tailwind CSS + DaisyUI
UI Components	Material UI (MUI)
State Management	Jotai + Zustand
Routing	React Router v6
HTTP Client	Axios
Forms	Formik + Yup
Charts	ApexCharts
Sliders	Swiper.js
Icons	React Icons
Notifications	React Toastify
Date	Jalali Moment + React Multi Date Picker
Deployment	Vercel

---

📁 Project Structure

BEHSHAHR/
├── public/
├── src/
│   ├── app/
│   ├── assets/
│   ├── components/
│   │   ├── Auth/
│   │   ├── ArticlesDetails/
│   │   ├── CoursesDetails/
│   │   ├── CoursesList/
│   │   ├── ForgetPasswordForm/
│   │   ├── Landing/
│   │   ├── NewsArticles/
│   │   ├── common/
│   │   └── NotFound/
│   ├── context/
│   │   ├── context/
│   │   ├── jotai/
│   │   └── zustand/
│   ├── core/
│   │   ├── api/
│   │   └── provider/
│   ├── routes/
│   ├── screens/
│   │   └── layout/
│   ├── types/
│   ├── userpanel/
│   │   ├── components/
│   │   │   ├── BasicTables/
│   │   │   ├── Dashboard/
│   │   │   ├── dropdown/
│   │   │   ├── header/
│   │   │   └── UserProfile/
│   │   ├── pages/
│   │   ├── AppHeader.tsx
│   │   ├── AppLayout.tsx
│   │   └── AppSidebar.tsx
│   ├── main.tsx
│   └── index.css
├── .env.local
├── vercel.json
├── tailwind.config.js
├── tsconfig.json
└── vite.config.ts

---

⚙️ Installation & Setup

Prerequisites

• Node.js >= 18
• npm or yarn

Steps

1. Clone the repository

git clone https://github.com/AbbasRostami/H-One.git
cd H-One

2. Install dependencies

npm install

3. Create env file Create a .env.local file in the project root:

VITE_BASE_URL=Base-URL

4. Run in development mode

npm run dev

5. Build for production

npm run build

6. Preview the build

npm run preview

---

🌍 Deployment on Vercel

The project uses Vercel Rewrites to handle Mixed Content issues:

{
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "baseURL/:path*"
    },
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

In production, API requests go to /api/* and Vercel proxies them to the backend server, resolving HTTPS → HTTP mixed content restrictions.

---

🎯 Roadmap

• Landing page design & implementation
• Complete authentication system
• Course listing with filters & pagination
• Article listing with filters & pagination
• User panel
• Dark mode support
• Deployment on Vercel
• Add unit tests with Vitest
• SEO optimization
• PWA support
• i18n for English language

---

🤝 Contributing

Contributions are welcome! If you find a bug or have a suggestion:

1. Fork the repository
2. Create a new branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

👨‍💻 Developer

Abbas Rostami

---

📄 License

This project is licensed under the MIT License.

---

⭐ If this project helped you, please give it a star!

Made with ❤️ by Abbas Rostami