Building porter.in Clone in 5 Days.
Hello Everyone,
I’m happy to share with you all that we as a team were able to build porter.in, Online courier services website in just 5 days with all the functionalities and pages as in the original website!. Yeah, you read that right, and all the credits go to our wonderful team members which included 6 Developers.
The name of the project is porter. in. Porter is India’s largest online delivery marketplace, connecting buyers with suppliers. The project was executed by 6 members in 5 days. They are:
Developers
- Swati Saulanki (Me)
- Kumar Gaurav
- Prakash Dsouza
- Akash Patil
- Bharat Razodkar
- Nitesh Singh Rawat
We are all students at Masai School and currently, we are in Unit-3, so at the end of each unit, we will be assigned a project to build using all the concepts we learned in that particular unit.
When we received porter.in the website to clone first thing we did was go through the flow of the actual website and we distributed the tasks among ourselves. Next, we had a meeting with our Designers and have gone through the designs prepared by them, no doubt both of them created beautiful layouts for us.
Then, coming to the Tech Stack to be used, we used frameworks and libraries that all 6 devs were familiar with for the development, they are
- JavaScript
- HTML
- CSS
Using the above tools and frameworks we were able to implement a lot of features and build dynamic web pages, following are the features we included in our project.
- Users can link their Paytm wallet for payment.
- Users can Book a porter to deliver the commodity.
- Users can easily book tempo, two-wheeler in 30 seconds.
- Responsive pages.
We created several features like the navbar where you could find different tempos by typing the name of the tempo in the box and it would filter the same and show results.
We also have a carousel display, where, by clicking the right arrow one can view the next image, and by clicking on the left arrow one can view the previous image.
It also has a footer page where you can register the problems that you may face while purchasing a tempo for the courier
It also has a payment feature where you have the option of making a payment via debit/credit card. You can fill in your details and make the payment after which your order shall be placed,
So that’s the basic information of what our project includes. Now, let’s walk through how the flow goes. To make it easier to understand, I have added the screen snippet of different pages, you can have a look at them in the below section.
SNIPPETS
1 Navbar Page
First of all, you can see here, there is a navbar where you can see the Porter
2. City Tempo
3. Packers & Movers
Here you can see this is Porter’s Packers and Movers Page
4. Driver Partners
5. For Enterprises
6. Support
7. Track Order
8. Pickup and drop anywhere within the city
Here you can book tempo your location for the courier. It will arrive in 30 seconds.
9. What We Offer
Here You can see all facilities are available for users, whenever users want to deliver their luggage, a courier whatever users want, just you have to click the two-wheeler, three-wheeler whatever you want then book your two-wheeler and your two-wheeler will be arriving in 30 seconds.
10. Cities
We are present right where you need us and care of all your logistics requirements.
11. FAQ
Here users can talk about their queries.
12. Footer
This footer is coming on all pages making it easy to check other pages in an easy fashion.
Whenever you have a problem like booking tempo, a two-wheeler whatever you have to problem. We are here to help you.
Outcomes of the project
By the time we completed this project we were able to understand the core concept of javaScript for web pages and many other things.
We also learned how to coordinate and work as a team with design pages based on their research and help developers to build user-friendly and beautiful websites.
I am very thankful to all of our Instructors, I’As, and team members in Unit 3.
