10 Projects Reactjs (NextJs Framework) + Tailwind

6 min readSep 27, 2021

So i challenged myself to learn Reactjs after my very long committed relationship to Vuejs. Early on i was quite skeptical and hesitant in learning this new language, but as they say.

“It’s only after you’ve stepped outside your comfort zone that you begin to change, grow, and transform”

I was impressed by the server side rendering on Nextjs which makes the website / app super fast in rendering content to the user.

I haven’t enjoyed building and crafting new platforms as i have while learning through this new journey.

I decided to copy / build / get inspired, whichever term suits it :). The goal is to be motivated and challenged, and have fun while doing it.

1. Facebook Clone AKA FelixBook

The first clone i decided to do was facebook. Their clean UI and the layout was quite a challenge. Fully responsive User Interface, with Google login and firestore as a backend.

You can try it out here (https://felixbook.vercel.app/), Hosted on Vercel. Features available are, Google login, Posting on the timeline both text and images.

Lessons: Css Styling, Javascript queries, Firestore Docs and Firestore storage for the images

2. HULU CLONE

This is a clone of the movie website Hulu, with some animation and transition effects. The clean UI and the Big screen support was the biggest learning point.

You can try it out here (https://hulu-2-0-react-next-tailwind.vercel.app/)

The content is fetched from the public tmdb servers (the movie database)

on different screen sizes (focus on the responsive designs)

Lessons: Css Styling, Javascript queries, api fetching of content from a server, integrations of icons and stylings, animations using tailwind css

3. AirBnb Clone

This was one of the most interesting builds, with multiple pages and different functionalities.

On the main page is the home page, on searching for a location there is integration with multiple date picker, and there is a results page, which has been integrated with mapbox (google maps alternative) to showcase location of different stays depending on the search box. Hosted in Vercel

You can try it out here (https://airbnb2-0-olive.vercel.app/)

Lessons: Navigation on nextjs (which is pretty easy using inbuilt routing) Map Box api integrations to pin locations and design maps as the above screenshot. Styling of different components, progress bar integrations, and a lot more cool stuff eg animations and images rendering (with lazy loading).

4. Whatsapp Web Clone

The clone of the popular chat application (whatsapp) the web version. with Google authentication and firebase as a backend for the chatting.

You can try it out here (https://whatsapp-2-0-gules.vercel.app/) hosted on vercel.

Basic features are: Logging in using Google Authentication, adding of contacts (by email) and chatting with them. PS: The chats are not end to end encrypted LOL…. i may consider adding more functionalities in the future, but as of now, it is what it is :) . if you sign up, drop me a dm on the Whats app clone

Lessons: More Css Styling and customizing the user interfaces, nextjs routing and state management to store user session.

5. Google Clone — AKA FOOGLE

Google clone made with React Nextjs & Tailwind. Fully responsive with live search results from google search api.

You can try it out here: https://google2-0-felixivance.vercel.app/

6. TESLA CLONE AKA FESLA

Tesla built clone using Reactjs & Redux, with sliding navigation menu, fully responsive, no apis integrated whatsoever.

You can check it out here

https://tesla-clone-felixivance.vercel.app/

Lessons: Redux, functional components, styled components, animations, more react plugins like react reveal.

6. INSTAGRAM CLONE

Instagram clone built on react (nextjs) & tailwind, with uploading images and next auth to login, feel free to :

check it out here https://instagram2-0-dun.vercel.app/

Lessons: NextAuth (for authentication), Firebase V9, Fire store v9, Recoil for state management, tailwind ui styling and responsiveness, moments in react, hosting on vercel.

7. Spotify Clone

Spotify clone build on React(NextJs), with tailwind as the UI, Using Spotify developer API, most intense build, with custom features, (ps, i tried to make it better than Spotify LOL)

NB: You have to have a premium Spotify account for music to actually play.

Lessons: state management using recoil, next auth v9, custom hooks, environment variables, Spotify Api, moment js, Vercel hosting.

8. NFT Web Listing Site

Built based on the knowledge of web3, decided to showcase some of my collected nfts (non-fungible token) on opensea. The site is built with nextjs, tailwind css, backed by opensea, and thirdweb.