The front-end of the BrainForge platform is built using ReactJS, which allows for the creation of dynamic and responsive user interfaces, crucial for providing an engaging learning experience to students. The front-end communicates with the back-end using RESTful API calls.
For Students:
- Homepage: A brief introduction to the platform with links to the course list and user details.
- Course List: A list of all the courses available on the platform, along with their descriptions and ratings.
- Wishlist: Displays all the courses that a student has added to their wishlist.
- Cart Checkout: Allows the user to complete course purchases.
- Course Content: Presents the course content for a particular course, including videos and related material.
- User Details: Provides details about the student's account, including their name, email, and other relevant information.
- User Edit Details: Allows students to edit their account details.
For Instructors:
- Dashboard: Offers an overview of the instructor's courses, along with ratings and feedback for each course.
- Insights: Provides detailed insights into the instructor's courses, including the number of views, clicks, and other relevant metrics.
- Course Management Pages: Enables instructors to create, update, and delete courses, as well as manage course content and pricing.
- View and Edit Profile Details: Allows instructors to view and edit their account details.
To build the front-end, we use frameworks and libraries such as ReactJS, CSS, and Tailwind for styling, and Redux for state management.
- Navigate to the
frontenddirectory. cd ./frontend- Create a
.envfile by copying the contents ofenv.exampleand filling in your information. - Install dependencies:
npm install - Start the React development server:
npm run dev
Access the application in your browser at http://localhost:5173.