Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ajaypatil1993/e-tutor-app-react
E-tutor App is an online e-learning platform built with React.js. It features interactive animations using Framer Motion, dynamic counting effects with Count-Up, and engaging carousels powered by React Slick for a rich content experience.
https://github.com/ajaypatil1993/e-tutor-app-react
animation css3 e-tutor framer-motion html5 mobile-first react-icons react-router react-slick react-slick-carousel reactjs responsive-design tailwindcss
Last synced: 14 days ago
JSON representation
E-tutor App is an online e-learning platform built with React.js. It features interactive animations using Framer Motion, dynamic counting effects with Count-Up, and engaging carousels powered by React Slick for a rich content experience.
- Host: GitHub
- URL: https://github.com/ajaypatil1993/e-tutor-app-react
- Owner: ajaypatil1993
- Created: 2024-10-27T20:57:11.000Z (19 days ago)
- Default Branch: main
- Last Pushed: 2024-10-27T21:06:02.000Z (19 days ago)
- Last Synced: 2024-10-28T01:05:05.946Z (19 days ago)
- Topics: animation, css3, e-tutor, framer-motion, html5, mobile-first, react-icons, react-router, react-slick, react-slick-carousel, reactjs, responsive-design, tailwindcss
- Language: JavaScript
- Homepage: https://e-tutor-app.netlify.app
- Size: 1.65 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# E-tutor App 📚💻
**E-tutor App** is an online e-learning platform created using React.js. It provides a modern, user-friendly interface for students to explore courses and access educational content, optimized for a seamless learning experience across devices.
## Screenshots 📸
### Desktop View:
![Screenshot of E-tutor Desktop](./src/assets/Screenshots/Screenshot-web-1.png)### Mobile View:
![Screenshot of E-tutor Mobile](./src/assets/Screenshots/iPhone-13-PRO-localhost-1.png)### VS Code Editor View:
![Screenshot of VS Code Editor](./src/assets/Screenshots/VS_Code_editor_Screenshot.png)## Features ✨
- **Responsive Design**: Adjusted for a great user experience on mobile, tablet, and desktop devices.
- **Course Catalog**: A structured course directory allowing users to explore various topics.
- **Interactive UI Components**: Engaging animations and carousels enhance the user interface.
- **Animated Transitions**: Powered by **Framer Motion** for smooth and engaging transitions.
- **Counters**: Dynamic counters using **react-countup** to show key metrics like number of courses, instructors, and students.
- **Icons**: Beautiful icons integrated with **React Icons**.
- **Carousels**: Smooth product showcases using **React Slick** and **Slick Carousel**.
- **React and Tailwind CSS**: Combines React's component-based structure with Tailwind CSS's responsive styling.
- **User Authentication**: Supports secure login and signup features for personalized course access.## Tech Stack 🛠️
![React](https://img.shields.io/badge/-React-61DAFB?style=flat&logo=react&logoColor=white)
![Tailwind CSS](https://img.shields.io/badge/-Tailwind%20CSS-38B2AC?style=flat&logo=tailwind-css&logoColor=white)
![Framer Motion](https://img.shields.io/badge/-Framer%20Motion-0055FF?style=flat&logo=framer&logoColor=white)
![React CountUp](https://img.shields.io/badge/-React%20CountUp-61DAFB?style=flat&logo=react&logoColor=white)
![React Icons](https://img.shields.io/badge/-React%20Icons-61DAFB?style=flat&logo=react&logoColor=white)
![React Slick](https://img.shields.io/badge/-React%20Slick-FD6D24?style=flat&logo=slick-carousel&logoColor=white)
![Slick Carousel](https://img.shields.io/badge/-Slick%20Carousel-FD6D24?style=flat&logo=slick-carousel&logoColor=white)
![React Router](https://img.shields.io/badge/-React%20Router-CA4245?style=flat&logo=react-router&logoColor=white)
![JavaScript](https://img.shields.io/badge/-JavaScript-F7DF1E?style=flat&logo=javascript&logoColor=black)
![HTML5](https://img.shields.io/badge/-HTML5-E34F26?style=flat&logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/-CSS3-1572B6?style=flat&logo=css3&logoColor=white)## Project Layout 🗂️
```bash
E-tutor-App/
│
├── public/
│ └── assets/
├── src/
│ ├── components/
│ ├── pages/
│ ├── styles/
│ ├── App.js
│ ├── index.js
│ └── ...
├── .gitignore
├── package.json
├── README.md
└── LICENSE
```- **`public/`**: Static assets like images.
- **`src/`**: Source files, including components, pages, and styles.
- **`App.js`**: Main app structure.
- **`components/`**: Reusable UI elements (e.g., navbar, footer, course cards).
- **`styles/`**: Tailwind CSS and custom styles.## Getting Started 🚀
### Prerequisites
- [Node.js](https://nodejs.org/) (version 14 or higher)
- [npm](https://www.npmjs.com/) (comes with Node.js)### Installation
1. **Clone the Repository**:
```bash
git clone https://github.com/your-username/e-tutor-app.git
cd e-tutor-app
```2. **Install Dependencies**:
```bash
npm install
```3. **Run the Development Server**:
```bash
npm start
```Open your browser and go to `http://localhost:3000` to view the app.
## Contributing 🤝
1. **Fork the Repository**
2. **Create a New Branch**:
```bash
git checkout -b feature/new-feature
```
3. **Commit Changes**:
```bash
git commit -m "Added new feature"
```
4. **Push to GitHub**:
```bash
git push origin feature/new-feature
```
5. **Open a Pull Request**.## Live Preview 🌐
You can check out the live version of **E-tutor App** at: [E-tutor App Live](https://e-tutor-app.netlify.app)
## Contact 📬
- **LinkedIn**: [Ajay Patil](https://www.linkedin.com/in/ajaypatil1993)
- **Email**: [[email protected]](mailto:[email protected])
- **GitHub**: [GitHub](https://github.com/ajaypatil1993)## License 📝
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
## Acknowledgements 🙏
- ![React](https://img.shields.io/badge/-React-61DAFB?style=flat&logo=react&logoColor=white)
- ![Tailwind CSS](https://img.shields.io/badge/-Tailwind%20CSS-38B2AC?style=flat&logo=tailwind-css&logoColor=white)
- ![Framer Motion](https://img.shields.io/badge/-Framer%20Motion-0055FF?style=flat&logo=framer&logoColor=white)
- ![React CountUp](https://img.shields.io/badge/-React%20CountUp-61DAFB?style=flat&logo=react&logoColor=white)
- ![React Icons](https://img.shields.io/badge/-React%20Icons-61DAFB?style=flat&logo=react&logoColor=white)
- ![React Slick](https://img.shields.io/badge/-React%20Slick-FD6D24?style=flat&logo=slick-carousel&logoColor=white)
- ![Slick Carousel](https://img.shields.io/badge/-Slick%20Carousel-FD6D24?style=flat&logo=slick-carousel&logoColor=white)