Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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.

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)