This project is a clone of Frontend-Masters,an edu-tech company offering various courses for web Development,frontend offers abundant courses like javascript, vue, react with different tutors. Frontend Masters is an Edtech Website that lets users take courses related to frontend technologies like CSS, React, Angular, Vue, and many more. It has the ability to combining a simple user experience and interface with enough depth for power users.
The tech Stack we used for creating this webiste are:-
- HTML
- CSS
- Javascript
- MongoDB
- EJS
- Express
- Node.js
The Landing page of Frontend Master displays the navigation bar for courses, Learn a particular course, pricing for their subscription and the login & signup part, along with the feedback of different users and the any futher activities in the frontend like bootcamp or coding workshop.
We have designed the carousel functionality of twitter using javascript as assigning the event listner to the arrow buttons and containing each twitter feedback in different container and put all the feedback in a container at last and overflow the image and user the attridutes like visibility hidden and trigger on the eventlistners.
The pricing page consist of various subscription according to yearly,monthly and teams and the payment module changes according to that, as if you choose the indivisiual pricing it will show the pricing for that and same for others packages, the pricing page is also the signup part for the frontend master as without paying up the price you can only access the preview part of the courses.
We create the api for the Pricing Page so that after user fill their basic details their data is posted to our mongo sever, so that we can fetch and validate their data at the time of login process.
After the sucessfull complition of the signup, your email, username and password is stored in the local storage and you can login with that credintials as, if the email ID and password are incorrect it will fail the vailidation and you cannot login in the website.All the user data are fetched from the monog server which we created for the signup of users.
In the courses page user can see the various courses provided by the frontend masters and user can also search for the particular course which he/she want to access, if you haven't done the payment you can only access the preview version of the courses, in the courses page there are different subpages like all course, popular courses and learn with having various information of different courses which you can access after Login in Frontend Master.
Download the project repo and open the src folder and run the server.js file after that you can call http://localhost:2230/home for viewing the flow of the website or you can directly:-