* The last 3 projects from above are not responsive for mobile devices.
Chat App
This was most challenging and also entertaining project for me. It is a real time chat app. For backend I built Apollo GraphQL server with Socket.io server middleware. I chose NoSQL MongoDB database as a database.
And for the authentication I am using NextAuthJS with MongoDB adapter.
On the other hand in the front-end I am using Next JS as a framework, TypeScript for type safety, Apollo Client for async data handling, Recoil for global state management and finally Tailwind CSS for building this colorful UI.
Rick And Morty
This is the first project I used Apollo GraphQL and really liked it. It is a blog-like project about tv series named Rick and Morty. Also there is fancy animations between page transitions.
Other technologies I used is Next JS, TypeScript, Framer Motion and Material UI.
YouTube Clone
This is a YouTube Clone. Not have all functionality like a real one, but contains multiple pages and each pages has different videos that you can choose one of them to watching. It is hybrid (CSR, SSR) and not responsively designed for mobile devices.
Home Page - Videos mixed-up by default, but there is a chip bar that contains categories and you can fetch a list of videos from server by category with choosing one of them.
Explore Page - Trending videos for Azerbaijan.
Search Results Page - Search results for any keyword or tag you entered in search bar. Mostly popular ones.
Watch Page - In this page you can watch videos you selected and read last 25 comments added to that video. Also you can see some videos related that video.
Tech Stack is Next JS, Context API, TypeScript, Material UI and YouTube Data API.
LinkedIn Clone
In this project my goal was just building identical UI as much as possible. And I added a couple of animations like you can see in LinkedIn. So here it is.
Tech stack is Next JS, TypeScript, Material UI and Framer Motion.
Watchlist
This is the first full-stack project that I created with Firebase products (Firestore database, Firebase Auth and Cloud Functions), Typescript and with Next JS . Also I am using Context API (global state management), Material UI, Framer Motion for animations and React Hook Form for validating forms in this project.
Before the creating watchlist you have to sign up or login. After that you can add movies to the list, also add comments to movies, like or dislike other's comments and etc.
Finally, what I want to mention that is interacting with comments can be a little slow due to Cloud Functions and internet connection.
E-Commerce
This is my second project which you can live a real e-commerce experience. You can sign up or login to website, add products to shopping cart, wishlist, change the count or remove them and etc.
This project also built with Next JS like first one. Beyond that users authenticate with Netlify Identity. I am managing global state with Redux (Redux Thunk for async data fetching, Redux Persist for persist state) and validating forms with React Hook Form. Material UI is my choice for UI again.
Recipe Blog
This is my first project I ever build. It's just simple, static site contains multiple recipe pages. In this project I used Next JS as a framework and static-site generator, Contentful CMS for content management and Material UI for UI components.