A Gradient Generator App built with React.js

An Invoice Generator project built with React and TailwindCSS

Tools

• React
• Tailwind CSS
• Headless UI
• Html-to-image
• jsPDF

React-based invoice generator with PDF export

A web application for generating invoices built using React provides an efficient and user-friendly solution for businesses to create and manage invoices. With its intuitive interface users can easily input customer information add items and services and calculate totals. The app allows users to export invoices directly from the app to PDF streamlining the invoicing process.

🧐 Features

Here’re some of the project’s best features:

• Add and delete invoice items
• Edit invoice item details
• Export invoice as a PDF
• Data validation for PDF generation
• Excel export

Overview

About App

This app generates Qr Code based on the url entered.

Features:

• Light / dark mode theme switcher
• Qr Code 'X1-Il.netlify.app' default on loading
• Dynamically generating the Qr Code as you type the URL
• Dynamically update the color and background of the Qr Code based on the customization input entered by the user
• Dynamically update the customized image of the Qr Code
• Removes the custom image of the Qr Code
• You can download the .png of the generated Qr Code

A Fantastic 3D Portfolio Website with Three.js and React.js

The most impressive websites in the world use 3D graphics and animations to bring their content to life. Learn how to build your own ThreeJS 3D Developer Portfolio today!

In this course, you’ll learn the following:

• ThreeJS – a powerful 3D graphics library for rendering and animating the 3D model
• React Three Fiber – a popular library for creating 3D graphics with ThreeJS in React
• TailwindCSS – a popular utility-first CSS styling framework
• Framer Motion – the most popular library used to bring your React website to life with animations You’ll also learn how to:
• Load, create and customize stunning 3D models and geometries with various lights, as well as understand the 3D world with a camera and positioning of an object in space.
• Make your code reusable and scalable using Higher Order Components (HOCs) and other industry-standard best practices
• Implement sending emails through a form on the website
• Ensure responsiveness across all devices and improve your site’s performance using Suspense and Preload.

React and TailwindCSS Portfolio Page With Dark Mode

Features

• React v18 with React Router v6
• Tailwind CSS v3
• Context API For State Management
• Custom Hooks
• Unit Testing
• Framer Motion transitions & animations
• Reusable components
• Dark mode
• Projects filter by category
• Projects filter by search
• Smooth scroll
• Counter
• Dynamic forms
• Back to top button
• Download file button
• Simple and responsive design

Devfolio

👨‍🎓 An eye-catching developer Portfolio, Built on NextJS, GSAP, Tailwind and React

Portfolio Webseite

This is a portfolio website built using React, Tailwind CSS, and TypeScript. The website showcases my skills and projects as a full-stack developer. For the contactform i used a backend, which is build on node.js and express.

Features

• SEO optimized
• User settings stored in session storage
• Dark and Light mode available
• Easy data modification through a single data.tsx file
• Gziped and lazy loaded Data
• Developed first with the Mobile First methodology, then for desktop.
• Compatible with all mobile devices and with a beautiful and pleasant user interface.
• Smooth scrolling in each section.Contains animations when scrolling.
• Uptime Service with colored animation

A Portfolio Template with React JS using Styled-Components and framer-motion for Animations

Build a Stunning Portfolio with React JS using Styled-Components and framer-motion for awesome Animations

This repository contains Final code for The Portfolio Website in ReactJS.

Spotify NextJs Clone App

🎧 🎵 Spotify clone app using spotify api and spotify SDK with React.js, Next.js and Redux.

React Figma Notes

A note-taking  app inspired by Figma, built with  React, Redux, and localStorage.

With this app, users can easily create, edit, and delete notes, and leave comments on them.

~This is a demo of extension that will be released in the future.

React Weather App

Weather  App is a simple weather  app developed in typescript using React, HTML and SASS. The app allows you to see the weather from your current location or another location around the globe using OpenWeather Api and Google Maps Api. Using One Call API the app displays the current weather, 24 hours and 6 days forecast. You can change the unit system from metric to imperial. The app is available in light and dark mode.

Admin Dashboard(reactBaord)

This project is an admin dashboard built using JavaScript and  React.js. It provides a comprehensive  user interface for managing and monitoring various aspects of an application or system. The dashboard offers a range of features, including data visualization, user management, and system configuration.

additionally, take a look at the package.json for all the dependencies that i had during the project.

React & TailwindCSS Portfolio – With Dark Mode

A simple portfolio starter theme built with  React and  Tailwind CSS. This is the React version of vuejs-tailwindcss-portfolio.

Twitter Clone with React.js (Next.js, Tailwind CSS)

This is a Twitter clone project built with  React.js,  Next.js, and Tailwind CSS. It aims to replicate some of the core features of Twitter, including user authentication, posting tweets, deleting tweets, viewing others’ tweets, and interacting with them through likes and comments.

Features

• User Authentication: Users can log in to the application using their Google account, leveraging the Google Sign-In API for secure and convenient authentication.

• Posting Tweets: Authenticated users can compose and publish new tweets. These tweets will be displayed on the main feed.

• Deleting Tweets: Users have the ability to delete their own tweets if they no longer wish to keep them visible.

• Viewing Others’ Tweets: Users can explore tweets from other users on the main feed. These tweets will be displayed in a chronological order, allowing users to stay updated with the latest posts.

• Likes and Comments: Users can engage with tweets by liking them or leaving comments. This promotes interaction and enables users to express their opinions on specific posts.

Tech Stack

The project is built using the following technologies:

• React.js: A popular JavaScript library for building user interfaces. It provides a component-based architecture and efficient rendering, making it ideal for creating interactive web applications.

• Next.js: A React framework that enables server-side rendering (SSR) and static site generation (SSG). Next.js simplifies the setup and allows for better performance and SEO optimization.

• Tailwind CSS: A utility-first CSS framework that provides a set of pre-defined styles and classes. Tailwind CSS allows for rapid styling and customization, making it easier to create a visually appealing and responsive user interface.