OYORooms Clone using Reactjs

About the project

In this journey of learning at Masai School, I and my team members Albart Jose, Salman Shaikh & Akif Patel built one more clone website, which is of OYO Rooms. While making this clone we have got UI/UX designs built on Figma from the design team of Design Shift — Supriya Monika Soreng & Soumik Mandal and our development team had built a look-alike website.

How we built

• Created a react app using create-react-app first.
• Followed Figma designs to build components.
• Used all the components to build the single page react application.
• Assigned to them different routes to make the end to end workflow.
• At last, we have deployed it to the Vercel app.

Technology used

• Reactjs
• JavaScript
• Material UI
• Styled-Components
• Vercel

Tools used

• Figma
• VS Code
• React Developer Tools

Libraries & Packages Used

• Material UI
• React Google Flight Date Picker
• Google Fonts
• Styled-Components
• Reactjs Stickynav
• React Router DOM

Run into your local system

Access here directly:

Open it in desktop for better experience

https://oyorooms-react-clone-dvanshukumawat.vercel.app/

Or Run Locally at your system:

Clone the project

git clone <https://github.com/AlbartJose/oyo_rooms.git

Go to the folder oyo-rooms-react-clone

Install npm packages

npm install or yarn install

Run the server

npm start or yarn start

View in Browser

go to <http://localhost:3000/

Screenshots

Landing Page, and Hotels Detail Page

Hotel Description Page

Payment Page

Conclusion

We have built this in 6 days. This was our first React project and also this was our first experience with Figma. We were able to bring an end to end flow of the website based on designs. We want to thank the design team to guide us during the whole project.

Team Members

Development Team

• Akif Patel: https://github.com/akifpatel8
• Albart Jose: https://github.com/AlbartJose
• Deevanshu Kumawat: https://github.com/dvanshukumawat
• Salman Shaikh: https://github.com/salman-nj2

Design Team

• Supriya Monika Soreng: https://www.behance.net/supriyasoreng
• Soumik Mandal: https://www.behance.net/soumikmandal