Responsive whatsapp clone using React (Typescript), tailwindcss and firebase

Built with:

- ReactJs Typescript
- TailwindCss
- Framer Motion
- Firebase

WriterAI - An AI based content writing tool that helps users easily write high quality emails, blogs, letters, thesis and other stuff

WriterAI

WriterAI is an AI based content writing tool that helps users easily write high quality emails, blogs, letters, thesis and other stuff. One can also share their project with others and work as a team.

This project is developed by Team 404 for Hashnode x PlanetScale hackathon. This team comprises of Ishant and Vaibhav.

About ?

WriterAI is a web app where a user can make use of artificial intelligence to quickly write high quality content. Just provide the AI with a sample input of one to two lines and the AI will generate 5 different paragraphs for you!

Amazon-Clone

About The Project

A full-stack e-commerce website inspired by the amazon website.

Core Functionalities:

• Creating/Signing in to an account.
• Single Page Application (instant response time).
• Desktop/Mobile responsiveness.
• Adding items to cart.
• Making payments.
• Storing of user information for individual accounts.

Although it doesn’t emulate all the functionalities of the real website, it definitely maintains most of them. It is an outstanding project usable on all devices, detects signed in users and so on. It is also built with REACT & REDUX! I hope you’ll love it.

Crypto website built with ReactJS and Firebase

• This website let user follow crypto trends

Functionality

• Functional Register/Login page using Firebase database.
• Website shows most popular crypto currencies and trending currencies via Coingecko API.
• As mentioned above website using Coingecko API.
• User can select certain coins and add them to their watchlist.
• Each coin has designated page with informations/prices/changes.
• Dark Mode / Light Mode.

Google Docs with React.js, Rich Text Editor, Tailwind CSS and Firebase

Veterinary clinic project made with React and Firebase

Roles

• Customer
• Doctor
• Admin

Functionality

• Authentication - Users can sign up, log in, and log out using their email and password. Authentication is handled by Firebase.

Customer

• Appointments - Registered user has an ability to make an appointment to any doctor for any time regardless of whether it is day or night because clinic work 24/7.
• Reviews - Users can leave a review about every member of doctors
• Send an email - If the user has a question, the answer to which cannot be found in the FAQ section, then on the main page there is a form that he can fill out, send and receive an answer

Doctor

• Appointments - Each doctor can view all records made by users to him. There is also a button on each appointment that you can use to see detailed information about it.
• Reviews - as well as with appointments doctors have an access to approved reviews about them.

Admin

• Users - Can see all registered users as well as all banned users. Can ban users and delete them.
• Reviews - Have a list of unapproved reviews users left and can approve it or delete.

Tech Stack

Client:

Server:

Additional libraries user

• EmailJS
•  React hook form
• antd
• react-intersection-observer
• redux-persist
• swiper

Event ticketing application with Next.js and Firebase

An event management system that allows users to create and share events. After creating an event, the creator (user) can share the event ticketing URL so others can register for each event. They also get notified and receive the event tickets via email.

The application does the following:

• authenticates users via Email and Password with Firebase,
• allows users to create events and generate an RSVP or registration link to share with friends or the public.
• when someone registers via your invite (RSVP) link, they receive the event ticket in their email, including a passcode which you can use to verify their event ticket from your dashboard.
• The application also allows you as a user to view the number of people who registered for your event, validate an attendee’s ticket via the passcode they receive, and also disable the registration link when you have enough attendees. You can also delete an event after it has occurred.

DateRangePicker Component

DateRangePicker is a reusable component built with Shadcn using beautifully designed components from Radix UI and Tailwind CSS. It provides a dropdown interface to allow users to select or enter a range of dates and includes additional options such as preset date ranges and an optional date comparison feature.

Live Chat Application

A Real-Time Chat that allows users to join chat rooms and communicate with each other instantly.
Built using Node.js & Socket.IO & React, and Styled-Components.

React Tools

Experience the power of real-time communication with the Realtime Group Chat WebApp – my ambitious project that delves into the world of interactive web development using React. As my second major project, this venture is aimed at expanding my skill setand learning new concepts within the realm of React and real-time applications. If you find any bugs or have suggestion just contact me!

MemeGenerator made with React JS

Password Generator users will be able to generate random passwords according to the settings

Password Generator

With Password Generator users will be able to generate random passwords according to the settings. The  application provides feedback to the user on how secure their password is

NextJS Threads

Threads web application social media platform that allows users to share their thoughts, with their friends and family. Threads is a full-stack web application built with TypeScript using Next.js 13 with Server Side Rendering. It uses MongoDB as a database, and Clerk as an authentication provider. It also uses UploadThing to upload images to the cloud. The application is styled with Tailwind CSS and Shadcn components.

Sticker Maker is a project designed to create custom profile images using Memoji-Laptop-Sticker. Developed by @flornkm, it incorporates various technologies and features to enhance the user experience.

Shadcn-chat

shadcn-chat is a customizable and reusable chat component built on top of shadcn. The component is designed for integration into projects and is built using Nextjs shadcn, and Framer Motion. Developers can utilize the source code and easily copy-paste the components into their Next.js projects.

Features

1. Code Generation for React/Next.js:

   • Generates code for React/Next.js pricing pages, offering convenience for developers.

2. Shadcn UI, Tailwind CSS, Radix UI Support:

   • Supports multiple UI frameworks, including Shadcn UI, Tailwind CSS, and Radix UI, giving users flexibility in choosing their preferred styling.

3. Customization Options:

   • Enables users to customize tiers, frequencies, and the overall appearance of the pricing pages.

4. One-Click Code Retrieval:

   • Allows users to retrieve the generated code with a single click, streamlining the implementation process.

5. Responsive and Easy to Modify:

   • Ensures that the generated pricing pages are responsive and easy to modify according to specific requirements.

6. Dark Mode Included:

   • Includes support for dark mode, catering to users who prefer a darker color scheme.

Pricing Page Generator simplifies the process of creating pricing pages by providing a user-friendly interface for customization and one-click code retrieval. The support for different UI frameworks enhances the tool's versatility, making it suitable for various React and Next.js projects.

This simple shopping cart prototype shows how react with Typescript, React hooks, react Context and Styled Components can be used to build a friendly user experience with instant visual updates and scaleable code in ecommerce applications.

Features

• Add and remove products from the floating cart using Context Api
• Filter products by available sizes using Context Api
• Responsive design