https://github.com/prakash-aryan/course-listing-app
This project is a comprehensive course management system built with React, showcasing advanced front-end development techniques and integration with Firebase backend services.
https://github.com/prakash-aryan/course-listing-app
firebase react redux
Last synced: 3 months ago
JSON representation
This project is a comprehensive course management system built with React, showcasing advanced front-end development techniques and integration with Firebase backend services.
- Host: GitHub
- URL: https://github.com/prakash-aryan/course-listing-app
- Owner: prakash-aryan
- License: mit
- Created: 2024-08-28T11:29:24.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-04T13:40:02.000Z (almost 2 years ago)
- Last Synced: 2025-01-05T17:14:27.117Z (over 1 year ago)
- Topics: firebase, react, redux
- Language: JavaScript
- Homepage:
- Size: 201 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Course Listing Application
This project is a comprehensive course management system built with React, showcasing advanced front-end development techniques and integration with Firebase backend services.
## Features
- **Course Listing**: Browse through a list of available courses with search functionality.
- **Course Details**: View detailed information about each course, including syllabus and prerequisites.
- **Student Dashboard**: Manage enrolled courses, track progress, and mark courses as completed.
- **Real-time Updates**: Experience live updates for course likes and enrollment status changes.
## Technologies Used
- React
- Redux for state management
- Firebase (Firestore) for backend services
- React Router for navigation
- Framer Motion for animations
- Tailwind CSS for styling
## Pages
1. **Home**: Landing page with an overview of the application.
2. **Courses**: List of all available courses with search and filter options.
3. **Course Details**: Detailed view of a specific course with enrollment options.
4. **Student Dashboard**: Personal space for students to manage their enrolled courses.
## Getting Started
### Prerequisites
- Node.js (v14 or later)
- npm or yarn
- Firebase account
### Installation
1. Clone the repository:
```
git clone git@github.com:prakash-aryan/course-listing-app.git
```
2. Navigate to the project directory:
```
cd course-listing-app
```
3. Install dependencies:
```
npm install
```
4. Create a `.env` file in the root directory with your Firebase configuration:
```
REACT_APP_FIREBASE_API_KEY=your_api_key
REACT_APP_FIREBASE_AUTH_DOMAIN=your_auth_domain
REACT_APP_FIREBASE_PROJECT_ID=your_project_id
REACT_APP_FIREBASE_STORAGE_BUCKET=your_storage_bucket
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
REACT_APP_FIREBASE_APP_ID=your_app_id
REACT_APP_FIREBASE_MEASUREMENT_ID=your_measurement_id
```
5. Populate the Firebase database:
- Ensure you have the necessary permissions in your Firebase project.
- Run the population script:
```
node populateFirebase.js
```
6. Start the development server:
```
npm start
```
The application should now be running on `http://localhost:3000`.
## Deployment
This project is set up for easy deployment on Vercel. Connect your GitHub repository to Vercel for automatic deployments on push.
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is licensed under the MIT License.