This is what our home page looks like
Team Sharks
Hello reader, we are the students of Masai School. In this blog, we will share our experience, related to our construct week project. In this project, we had added backend software technology to our previous project which is British website named Gymshark.com.
Team Sharks Members-
- Aniket Pilankar
- Dipak Tange
- Ritesh Yadav
- Abhishek Choudhary
- Avinash Kumar
- Sakshi Rai
How did we start?
After working with the frontend in Unit-3, Our new challenge was to introduce backend technology to our website of the unit-4 Project. From the first day to the last day of the group all the members had given their best. The first thing we did was to decide to communicate with each other through the WhatsApp app , Slack and Zoom. The flow of the website was determined, then the website page was divided among each member so as to complete the website as soon as possible before the deadline.
Background.
In unit-3, the most important topic of advanced Javascript was taught and on the DSA side, we learned queues, recursion, backtracking, merge & quick sort algorithms. So from what we have learned, we made a dynamic website with the help of DOM, import-export, created our own database, and made an API call to fetch the stored data and appended it to the pages. In unit-4 we learned about backend technology in which we had learned about authentication, authorization , fetching routes with methods , connecting the database to mongoDb , express js , node js and mongoose and its application. We have also learned about various NPM packages.
We use the following things to build our website:
- HTML
- CSS
- Advanced javascript
- Express js
- Node js
- MongoDb
- NPM packages
Challenges
- Deployment of our website with AWS and Heroku
- Read others code and make changes to it
- Exact pixel-perfect cloning of the website
- Abnormal behavior of some parts in our website while linking pages with each other.
- Make the database
- Making connection of frontend to backend
Day wise flow
- Day-1- We started working on the creating the databases
- Day-2- Database created according to the category and sections
- Day-3- Made the routes and methods to fetch the data from frontend and also worked on authentication of new user with the help jswebtoken.
- Day-4- Started working database of the Women’s page section, Men’s page section, Searching section, Payment section, Address page. The collected data stored in the Mongo atlas.
- Day- 5-All the above website pages were completed and linked to each other. The code was committed to Github.
- Day-6- Finalize our Project code, Readme file, Video Presentation, and this blog post.
Roles and responsibilities of team members:
- Ritesh — Index page,Payment page,Inside page(Single product page) , header(Navbar) and footer components, Worked on user data storing.
- Aniket — Login Page, Sign Up page, Category page, admin page,authentication using Jsonwebtoken and bcrypt,Readme file.
- Dipak — Cart page, Javascript features, helped with the Database creation,Created womens and mens routes and methods,Created blog
- Sakshi — Created Women Page Section, created women products database,Ppt Presentation
- Abhishek- Created Search Page and stored the data of products in database and provided additional functionality to it.
6. Avinash- Created Men’s page Section , created the database for mens product.
Resources
- https://developer.mozilla.org/en-US/
- https://www.npmjs.com/package
- MongoDb atlas and compass
- Postman web app
- https://www.heroku.com/
- https://fonts.google.com/
- https://fontawesome.com/
- YouTube
Git Hub Details-
- Project Link- link (Project Gymshark)
- Aniket Pilankar: @Aniket-Pilankar
- Ritesh Yadav: @ritesh-2124
- Dipak Tange: @deep1296
- Avinash Kumar: @avinash70008
- Sakshi Rai: @Saarah123
- Abhishek Choudhary: @abhich21
Thank You for reading