A modern and educational web platform for learning Web Development and Cybersecurity concepts with a beautiful and sleek UI/UX.
The Apple Technology website is built to explore modern front-end development practices and backend integration.
It includes best practices such as:
- Code refactoring and reusable components
- Responsive design
- Global state management
- Dark / light theme toggle
- Localization (multi-language support)
- Skeleton loading
- GSAP animations
- Counter animation
- Form validation with Zod and React Hook Form
This project is built with React (TypeScript) and Tailwind CSS, and powered by Supabase for backend services.
🌐 Live Demo: apple-tecnology.vercel.app
📁 Repository: GitHub Link
- 🔃 Skeleton loading pages
- 🌎 Multi-language support using i18next
- 📱 Fully responsive design
- 🌙 Dark / Light mode toggle
- 🍕 SwiperJS slideshow
- 🧑💻 Article filtering system
- 🛠️ Individual team member articles and comments
- 📞 Contact form with validation (Zod + React Hook Form)
- 🔐 JWT authentication with Supabase
- 🌐 Global search functionality
- ⚙️ Redux Toolkit for global state management
- 🧩 Beautiful GSAP & Framer Motion animations
| Category | Technologies |
|---|---|
| Frontend | React, TypeScript, Tailwind CSS |
| State Management | Redux Toolkit, React Hooks |
| Animations | GSAP, Framer Motion |
| Validation | Zod, React Hook Form |
| Localization | i18next |
| Backend | Supabase (Auth, Database, Storage) |
| UI Enhancements | Skeleton loading, Button loading, SwiperJS |
- 🏠 Home
- 📄 Articles
- 📰 Show Article
- 👥 Team Members
- 📞 Contact Us
- 🧑💻 Profile
- ℹ️ About Us
- 🔑 Login / Register
To run this project locally:
# Clone the repository
git clone https://github.com/hassanullahusmani45/apple.git
# Navigate to the project folder
cd apple
# Install dependencies
npm install
# Run the development server
npm run dev