Skip to content

Develop the clone of store.rockstartgames.com website in the construct week project in Masai School

Notifications You must be signed in to change notification settings

aman-638/store.rockstartgames.com-Frontend-Clone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

CHALLENGES AND LEARNINGS WHILE CLONING “store.rockstargames.com”

Hello readers most of you would be knowing about store.rockstartgames.com, and for those who don’t know, Rockstar Games, Inc. is an American video game publisher based in New York City One of such action-adventure game franchises is Grand Theft Auto.

So we as a team was assigned to develop the clone of this website in the construct week project in Masai School. And to throw some more light, store.rockstargames.com was our project and we managed to complete it in just 5 days, so yeah, a big cheer to the team { Aman(me), Khushboo, Rohit, Shantanu, Shreyas }.

So let me take you a few days back, where we are setting up the desks to start the project.

Initiating the project

We were assigned with the team and we all were very new to each of us as we were interacting for the first time. At first, I thought of removing this communication gap between the team members and hence created a WhatsApp group, and we connected on zoom-call for some casual talks, get interacted with each other which is necessary to work on any project. So at the meeting itself, we set the plot of how to initiate the project and divided our parts as well.

Tech Stack used

The software and tools we’ve used to work on the project are:

  1. Frontend →ReactJS, JSX, TailwindCSS, MaterialUI.
  2. Backend →NodeJs, ExpressJs, MongoDB, Mongoose.
  3. Packages →Bcrypt, UUID, JWT, Passport, Instamojo Payment Gateway.
  4. Tools →Postman, VSCode, Github.

Day-1 Initialize the Project and Divide the Work

In the initial meeting, we get familiar with each other and after a little brainstorming, we discuss the roadmap and divided the work.

Challenges Faced

On day-1 we were confused between the frontend and backend and how to link it So we decided to go with the backend first and complete the routes for fetching the data and Authorizing the user.

Day-2 Created Routes and Api’s

So as a part of the plan, we tried to complete all the routes to fetch different games data, gear data and also tried our best to complete the authorization part.

Challenges Faced

To complete all the routes and to fetch this data we need to come up with different routes that we can link to the frontend and map it accordingly and as there is social login on the original website, we have a team meeting in which we brainstorm about the same and after facing some challenges we solved that and added social login.

Day-3 Added Google Auth and Started Frontend

In day 3 we solved our social login Issue and now we are successfully able to login users using Google OAuth. And now as most of our backend part is done, we moved to the frontend part.

Challenges Faced

Google OAuth is a simple thing but because of some minor error we face some issues also our backend is done and we try to deploy on Heroku and we face some platform-specific issues that we solved. Also as we started working on the frontend/ReactJs we need to figure out the components and breakout the site into smaller parts this also takes some of our time.

Day-4 Created Home Page, SignUp and SignIn

After Picturising the site into smaller components and dividing the respective work we can complete SignUp, SignIn, and half of the home page.

Challenges Faced

Sometimes it takes half a day to fix a small bug and when time is a constraint it makes you frustrated but teamwork and helping each other can make your problem solved and relax your mind.

Day-5 Created Cart, Payment Gateway, and other Pages

Cart Page and Payment Gateway is the most important thing in eCommerce websites So we dedicatedly given our whole day to these things and also Integrated other pages.

Challenges Faced

As no one of us is familiar with the payment gateway thing and we need to go through the documentation so it takes time and some more effort goes into adding products to the cart and totaling the things is also challenging.

Conclusion

At the end of the day5 with equal contribution from all the five members, we successfully Cloned the websites with all the necessary features and functionality. The equal contribution makes the project happen and is completed in a given time.

In every project, the only thing is we are going to face some challenges and difficulties, but at last, it is all about how we handled these and How supportive the team is.

Project Description

So now comes the most important part, to unveil what we built.

  • The Landing Page (Home Page)
  • SignUp/Login Page
  • Product Page
  • Product Detail Page
  • Cart Page
  • Payment Page

So I’ve shared the important screenshots and you can go through the whole project from the repository link that is mentioned below.

The public Github repo link for the Frontendhttps://github.com/aman-638/store.rockstartgames.com-Frontend-Clone

The public Github repo link for the Backend — https://github.com/Shreyasgkhakal100/store.rockstartgames.com-Backend-Clone

These were just some of the parts, you can go through the whole website deployed link is — https://store-rockstargames.vercel.app/

Major takeaways from the Project

There are a lot of learning to take while working on a team it improves not only our technical skills but also polishes our people skill.

  1. Collaborating with the team
  2. Overcoming communication barrier
  3. Getting industry like experience
  4. Work within the time constraints
  5. Last but not least — Some great friends

Wrapping Up

If you are still here reading from the beginning, I am thankful to you and if you like reading it or find something useful, please spend a few of your minutes to praise our team.

Mentioned below are the LinkedIn profiles of the team members.

ThankYou for reading.