Goodreads Clone - React.js
In the dawn of a new year, many people are crafting their New Year Resolutions. Read more is a popular resolution. It’s no secret that reading is good for you.
We are students at Masai School, a coding boot camp, and we have completed 3 months of 7 months Full Stack Web development course. As of now, we have learned HTML, CSS, Javascript, and React.js. We are Charlie, a team of four, Himanshu Kumar, Mandar Satam, Manish Raghavan, and myself. We have created the clone of Goodreads - a forum for book lovers.
Tech Stack Used
- HTML
- CSS
- Javascript
- React.js
- Redux
- Axios API
- Google Books API
- JSON Server API
- Heroku
- Material UI Library
- Some other npm packages
Features Built
- Home page with latest community feeds
- My books to maintain user's reading list
- Dynamic search bar for book search
- Finding books by genre
- Add books to the reading list
- General quiz on books
- Quotes from authors
- Joining groups based on interest
- Chat features
Feature Explanation
1. HomePage
- The home page displays all the community feeds.
- We can comment and like those feeds.
- We can also post feeds.
- It also shows the books that we are to read and currently reading.
2. My books
- My books page holds the details of all the books on the user's bookshelf.
- User can see what are all the books that he/she wants to read, currently reading and the books that he/she has already read.
- Users can also filter and sort books by title, year, and ratings.
3. Dynamic search
- Users can search for books by book name and author name, results are dynamic based on every character the user types.
4. Books by genre
- Users can search for books based on genre and can have all the books under the genre.
5. Add books to list
- Users can search for a book, navigate to the book page can add that book to the shelf under categories like want to read, currently reading, or already read.
- It will be reflected on the homepage as a feed and also in my book section.
6. Quiz
- The quiz page has random quizzes for users. Users can take quizzes, once answered a question it shows whether the answer to the question is right or wrong.
- User can also skip questions.
- Stats of the quiz will also be displayed.
7. Quotes
- Quotes section has many famous quotes from authors.
- User can also search for quotes based on authors.
- Users can add their favorite quotes to my quotes.
- Users can even write their own quotes and post them in the quotes section.
8. Groups
- Users can join groups based on the interest of genres.
- Groups have many other users having similar interests.
- It gives book recommendations for that genre.
- User can also make discussions with other users and get recommendations.
9. Chat
- In the chat section, users can send a direct message to other people and have an end-to-end conversation.
Challenges Faced
- Not having a backend source for data, It was hard for us to create our own schema for having all the required data.
- There were many ES Lint conflicts while pushing to git. We were facing those kinds of conflicts for the very first time. At the initial stage, we lost some files while resolving those conflicts.
I was fortunate to have skilled and highly motivated persons as my teammates, we had an exchange of knowledge and ideas. Besides everything, we enjoyed working together. We are grateful to Masai school for giving us the exposure to work on team projects.