Hello, my name is Akshay Kadam, I am an aspiring full-stack web developer. And this is my story of building a working clone of Product Hunt in a span of 4 days. So without any delay let's get started…
We were a team of 4 people and were assigned to build a clone of product hunt while collaborating remotely. Now working remotely in a team has its own pros and cons. And furthermore, we barely had spoken to each other, so in short, we had no idea about each other's strengths and weaknesses. So on the very first day, we tried to understand the website we were building and tried to build an approach.
The Approach
- Decide the functionalities which we want to build over the period of 4 days
- Let team members choose which functionality they want to build
- Collect data by Scraping the original Product Hunt website to get content
- Start off with static UI
Tech Stack
- HTML
- CSS
- Javascript
Libraries
- React
- React-Redux
- Material UI
- Ant Design
- Confetti
- Stripe
- Express js
- Axios
- JSON Mock Server
Result
At the end of four days, we were able to develop a website with the following
Features
- A user can sign up with google auth and login with the same
- Users can sort products on basis of popularity and new
- Users can click on a product card and get detailed information about a single product where they can also share the product on Facebook or tweet it on Twitter
- Users can comment under a product and other users can reply to those comments
- A user can post a product
- A user can create a discussion on the discussion page and other users can comment under it
- A user can sort the discussions depending upon new and popularity
- A user can ask a question or a product suggestion, and other users can recommend products
- A user can look for product mentors and book an appointment with them
- The appointments will be sorted depending upon the date.
- A user find jobs and apply for the same
- A user can filter jobs upon locations and remote
- A user can post a job
Learning outcomes
- Collaborating remotely
- Teamwork
- Using Git version control effectively
- Learning about UI libraries such as Material and Ant Design
- Communication is the key to any teams success
- No matter how many roadblocks may come one’s way, only his/her commitment will get them through.