DEV Community: Codex

Welcome to an in-depth look at my latest project: a commercial website built with the latest technologies to provide a seamless, responsive, and blazing-fast user experience! In this blog post, I’ll walk you through the features, tech stack, and highlights of this project.

🌟 Project Overview

This website is designed to meet modern business needs with:

Fast and reliable performance
Scalability
A visually appealing and consistent design

💼 Key Features

Here are the core features of this commercial website:

Home Page

The landing page provides users with a captivating introduction to the business.
Request a Quote Page

A dedicated page for users to request customized service quotes easily.
About Page

Learn more about the company’s mission, values, and vision.
Blog Page

Dynamic content is fetched via an API to keep users updated with the latest articles and insights.
Blog Detail Page

Supports dynamic routes to display individual blog posts seamlessly.
Pricing Page

Transparent pricing plans to fit varying customer needs.
Services Page

A showcase of the wide range of services the business offers.
Use Cases Page

Real-world examples of how the solutions can benefit different industries.

🎨 Tech Stack

The website is powered by the following technologies:

Next.js 15

The latest version of Next.js provides server-side rendering (SSR) and incremental static regeneration (ISR) for a high-performance experience.
TypeScript

Ensures code quality, maintainability, and scalability for the future.
Tailwind CSS

A utility-first CSS framework for building beautiful, responsive designs quickly and consistently.

📂 Structure and Dynamic Routing

The blog section uses dynamic routes with Next.js. This allows for a structured yet flexible approach to managing individual blog pages. By fetching data via API calls, the blog remains dynamic and easy to maintain.

Example of a dynamic route: app/blog/[slug]/page.tsx


import Image from 'next/image'
import Link from 'next/link'
import { IoCalendarClearOutline as CalendarDays, IoTimeOutline as Clock, IoArrowBack as ArrowLeft} from "react-icons/io5";
import BlogCard from '@/components/BlogCard'
import SocialMedia from '@/components/SocialMedia'
import { Post, Author } from '@/app/utils/types';


async function getPost(slug: string): Promise<Post> {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${slug}`);
  if (!res.ok) throw new Error('Failed to fetch post');
  return res.json();
}

async function getAuthor(userId: number): Promise<Author> {
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
  if (!res.ok) throw new Error('Failed to fetch author')
  return res.json()
}

async function getRelatedPosts(): Promise<Post[]> {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=3')
  if (!res.ok) throw new Error('Failed to fetch related posts')
  return res.json()
}

async function getFeaturedPosts(): Promise<Post[]> {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=3')
  if (!res.ok) throw new Error('Failed to fetch featured posts')
  return res.json()
}

export default async function BlogPost({ params }: { params: { slug: string } }) {
  const { slug } = await params;
  const post = await getPost(slug)
  const author = await getAuthor(post.userId)
  const relatedPosts = await getRelatedPosts()
  const featuredPosts = await getFeaturedPosts()
  const postUrl = "https://www.example.com/blog/my-awesome-post";
  const postTitle = "My Awesome Blog Post";

  return (
    <div className="min-h-screen py-24">
      <div className="container mx-auto px-4">
        <Link
          href="/blog"
          className="inline-flex items-center text-black font-bold hover:text-primary transition-colors mb-8"
        >
          <ArrowLeft className="w-4 h-4 mr-2" /> Back to Blog
        </Link>
        <div className="flex flex-col lg:flex-row gap-8">
          <div className="lg:w-2/3">
            <div className="bg-white rounded-4xl p-8 border-1 border-black shadow-[0px_6px_0px_0px_rgba(0,0,0,1)]">
              <div className="relative w-full h-64 mb-8">
                <Image
                  src={`https://picsum.photos/seed/${post.id}/800/600`}
                  alt={post.title}
                  fill
                  priority
                  sizes="(max-width: 768px) 100vw, 50vw" 
                  className="rounded-3xl object-cover"
                />
              </div>
              <h1 className="text-4xl font-bold mb-4">{post.title}</h1>
              <div className="flex items-center mb-6">
                <div className="w-10 h-10 bg-gray-300 rounded-full mr-4"></div>
                <div>
                  <p className="font-bold">{author.name}</p>
                  <div className="flex items-center text-sm text-gray-500">
                    <CalendarDays className="w-4 h-4 mr-1" />
                    {new Date().toISOString().split('T')[0]}
                    <span className="mx-2">•</span>
                    <Clock className="w-4 h-4 mr-1" />
                    {Math.floor(Math.random() * 10) + 3} min read
                  </div>
                </div>
              </div>
              <div className="prose max-w-none">
                <p>{post.body}</p>
                <p>{post.body}</p>
                <p>{post.body}</p>
              </div>
              <div className="mt-16">
                <SocialMedia linksType="share" url={postUrl} title={postTitle} />
              </div>
            </div>
          </div>
          <div className="lg:w-1/3 space-y-8">
            <div className="bg-white rounded-4xl p-6 border-1 border-black shadow-[0px_6px_0px_0px_rgba(0,0,0,1)]">
              <h2 className="text-2xl font-bold mb-4">Featured Posts</h2>
              <div className="space-y-4">
                {featuredPosts.map((featuredPost) => (
                  <div key={featuredPost.id} className="border-b border-gray-200 pb-4 last:border-b-0 last:pb-0">
                    <div className="relative w-full h-40 mb-2">
                      <Image
                        src={`https://picsum.photos/seed/${featuredPost.id}/800/600`}
                        alt={featuredPost.title}
                        fill
                        sizes="(max-width: 768px) 100vw, 50vw" 
                        className="rounded-xl object-cover"
                      />
                    </div>
                    <Link href={`/blog/${featuredPost.id}`}>
                      <h3 className="font-bold hover:text-primary transition-colors">{featuredPost.title}</h3>
                    </Link>
                    <p className="text-sm text-gray-500">{new Date().toISOString().split('T')[0]}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
        <div className="mt-12">
          <h2 className="text-3xl font-bold mb-6">Related Posts</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {relatedPosts.map((relatedPost) => (
              <BlogCard
                key={relatedPost.id}
                title={relatedPost.title}
                excerpt={relatedPost.body.slice(0, 100) + '...'}
                slug={relatedPost.id.toString()}
                coverImage={`https://picsum.photos/seed/${relatedPost.id}/800/600`}
                date={new Date().toISOString().split('T')[0]}
                category={['Marketing', 'Design', 'Development'][Math.floor(Math.random() * 3)]}
                readTime={`${Math.floor(Math.random() * 10) + 3} min read`}
              />
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

🔗 Resources and Downloads
Download Full Code: Get the complete project files here 👉 Download Full code 🔗 Download

❤️ Show Some Love!
Enjoy the video, and don't forget to like, share, and subscribe for more amazing projects!
Support me ❤️ Support Me

🚀 Conclusion

This project demonstrates the power and flexibility of modern web development tools like Next.js, TypeScript, and Tailwind CSS. Whether you’re building a blog, a business site, or a portfolio, these technologies provide the foundation for exceptional user experiences.

Let me know your thoughts in the comments below or connect with me for feedback and discussions!

❤️ Thank you for reading!

#NextJS15 #TypeScript #TailwindCSS #CommercialWebsite #ModernWebDesign #APIBasedBlog #BusinessWebsite #ResponsiveDesign #WebDevelopment #NextJSProject #TailwindUI #WebsiteFeatures #CustomQuotePage #TechDrivenDesign

🌿 Building Greenbank: A Modern React Vite TypeScript Responsive Website 🌿

Codex — Sat, 18 Jan 2025 16:46:41 +0000

🌿 Building Greenbank: A Modern React Vite TypeScript Responsive Website 🌿

Codex ・ Dec 30 '24

#webdev #react #typescript #tailwindcss

Nextjs 15

Codex — Thu, 09 Jan 2025 20:40:46 +0000

Dark Portfolio: A Fully Responsive Next.js 15 + TypeScript + Tailwind CSS Project

Codex ・ Dec 22 '24

#webdev #nextjs #typescript #tailwindcss

React js Portfolio

Codex — Thu, 09 Jan 2025 20:30:43 +0000

Neubrutalism React TypeScript Tailwind Portfolio Website

Codex ・ Dec 20 '24

#react #typescript #tailwindcss #webdev

🌿 Building Greenbank: A Modern React Vite TypeScript Responsive Website 🌿

Codex — Mon, 30 Dec 2024 17:25:37 +0000

Step into the world of modern web design with Greenbank, a cutting-edge React, Vite, and Tailwind CSS project. This blog post guides you through creating a responsive banking or credit card landing page with a sleek, professional design. Whether you’re new to frontend development or a seasoned developer, this project showcases essential techniques for building dynamic and stylish websites.

💻 What’s Inside?

Greenbank is a feature-rich responsive website designed to offer an engaging user experience. Here's what you'll find:

Stylish Home Page: Captivating design to make a lasting first impression.
Informative About Page: Share your bank's vision and services.
Customizing Page: Allow users to personalize their options.
Find Best Card Page: Compare credit card benefits with ease.
Functional Contact Page: Help users connect with your bank.

✨ Why Build Greenbank?

If you're looking to create a responsive website with a modern design for the banking industry, Greenbank is the perfect inspiration. This project demonstrates how to:

Turn a Figma design into a fully functional, responsive landing page.
Create reusable React components.
Optimize layouts for both mobile and desktop devices.
Leverage the power of Tailwind CSS for advanced styling.

The skills and techniques you’ll learn here are invaluable for any frontend developer aspiring to master modern web development.

🔧 Tech Stack

React: For creating dynamic user interfaces.
Vite: A fast build tool for web development.
TypeScript: Adds type safety to your React project.
Tailwind CSS: Enables rapid, responsive UI design.

🚀 Project Walkthrough

The Greenbank project uses React Router to manage navigation across five main pages:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import HomePage from './pages/HomePage'; 
import PersonalizedCard from './pages/PersonalizedCardPage'; 
import FindCardPage from './pages/FindCardPage'; 
import ContactPage from './pages/ContactPage'; 
import AboutPage from './pages/AboutPage';
import PageLayout from './layout/PageLayout';
import { Footer, ScrollToTop } from './components';


function App() {
  return (
    <Router>
      <ScrollToTop /> 
      <PageLayout>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
          <Route path="/personalizedcard" element={<PersonalizedCard />} />
          <Route path="/findcard" element={<FindCardPage />} />
          <Route path="/contact" element={<ContactPage />} />
        </Routes>
        <Footer/>
      </PageLayout>
    </Router>
  );
}

export default App;

✨ Highlight: The Hero Section

The Hero component introduces a compelling call to action with a modern design. It uses Tailwind CSS for responsive styling and incorporates animations for visual appeal.

import React from 'react';
import { user1, user2, user3, cardHero, textLine } from '../images';
import { GoArrowRight } from "react-icons/go";

const Hero: React.FC = () => (
  <section className="container mx-auto px-4 py-20 flex flex-col lg:flex-row items-center">
    <div className="lg:w-1/2 mb-10 lg:mb-0">
      <h1 className="text-4xl md:text-5xl font-bold mb-6 relative"> 
        <div className="relative inline-flex items-center">
          <span className="relative z-10 mb-3 xs:text-3xl">Discover the Perfect</span> 
        </div>
        {/* Circle around "Credit Card" */}
        <div className="relative inline-flex items-center">
          <span className="relative z-10 ml-2 lg:ml-0">Credit Card</span> {/* Wrap "Credit Card" text */}
          <img 
            src={textLine} 
            alt="Text Line"
            className="absolute inset-0 -top-2 -left-1 z-50" 
          />
        </div>
        <span className="relative z-10 xs:text-3xl"> for You</span> {/* Wrap the rest of the heading */}
      </h1>
      <p className="text-lg md:text-xl mb-8 text-gray-300 font-extralight mr-20">
        Discover the power of our secure and rewarding credit cards. Explore our range of credit cards and take control of your finances today.
      </p>
      <button className="bg-primary text-white px-6 py-3 rounded-full text-sm font-normal hover:bg-green-500 transition duration-300 flex items-center">
        Get Started <GoArrowRight className="ml-2 w-5 h-5" />
      </button>
      <div className="mt-8 flex items-center">
        <div className="flex -space-x-4">
          {[user1, user2, user3].map((src, index) => (
            <img
              key={index}
              src={src}
              width={40}
              height={40}
              alt={`User ${index + 1}`}
              className="rounded-full border-2 border-white"
            />
          ))}
        </div>
        <div className="ml-4">
          <div className="text-sm font-semibold text-white">10.2k+</div>
          <div className="text-sm font-thin text-gray-300">users joined the waitlist</div>
        </div>
      </div>
    </div>
    <div className="lg:w-1/2 relative">
      <img
        src={cardHero}
        width={500}
        height={300}
        alt="Credit Card"
        className="w-full h-auto relative z-10"
      /> 
      {/* Responsive sizing for the circle */}
    <div className="absolute top-16 -right-20 
        w-64 h-64  
        xs:w-56 xs:h-56
        sm:w-80 sm:h-80 sm:top-16
        md:w-96 md:h-96  md:top-28
        lg:w-112 lg:h-112 lg:-right-40 lg:top-10
        between-1280-1480:w-102 between-1300-1450:h-102 between-1280-1480:top-20 
        xl:w-160 xl:h-160  xl:top-24 
        bg-primary rounded-full flex items-center justify-center z-0" />
    </div>
  </section>
);

export default Hero;

🌟 Why Tailwind CSS?

Tailwind CSS simplifies complex styling tasks, allowing you to focus on the design rather than debugging CSS. The Greenbank project uses custom Tailwind configuration for unique colors, fonts, and breakpoints:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        'mplus': ['"M PLUS 1"', 'sans-serif'],
        'poppins': ['"Poppins"', 'sans-serif'],
      },
      spacing: {
        '160': '30rem', 
      },
      screens: {
        'xs': {'max': '411px'},
        'between-1280-1480': { 'min': '1280px', 'max': '1480px' }, // Custom breakpoint
      },
      colors: {
        primary: '#2BB32A',     // Primary color
        secondary: '#3D544D',   // Secondary color
        background: '#010101',  // Background color
      },
    },
  },
  plugins: [],
}

📥 Ready to Start?

You can download the complete project and start customizing it for your own needs.

Source Code 👉 Download Now

🎨 Design Inspiration:

Based on a creative and modern GreenBank Figma Template, this project brings the design to life with React and Tailwind CSS, delivering a sleek, professional user experience for the banking and credit card industry 👉 Figma File

👀 Join the Community!

If you found this guide helpful, like, share, and subscribe for more projects like this. Let us know in the comments how you would customize Greenbank for your own banking or fintech project!

#React #Vite #TailwindCSS #WebDesign #ResponsiveDesign #ReactProject #FrontendDevelopment #ModernWebsite

🌱 Responsive Planto Ecommerce Website with React, Vite, TypeScript & Tailwind CSS 🌱

Codex — Mon, 30 Dec 2024 16:58:59 +0000

🌱 Responsive Planto Ecommerce Website with React, Vite, TypeScript & Tailwind CSS 🌱

Welcome to an exciting journey in modern web development! 🚀 In this project, we’ll create a fully responsive ecommerce website for selling herbs using cutting-edge technologies: React, Vite, TypeScript, and Tailwind CSS. This project is perfect for developers of all levels looking to sharpen their skills while building a practical application.

💻 Features:

Stunning Home Page: An eye-catching design to welcome your visitors.
Smooth Checkout Process: Simplify purchasing with a user-friendly checkout page.
Detailed Plant Product Pages: Highlight the unique benefits of each plant.
Organized Plant Types Page: Help users browse by category.
Functional Contact Page: Enable users to get in touch effortlessly.

📦 What It contains:

Responsive Design Best Practices: Ensure your website looks great on any device.
Modern Component-Based Development: Build clean, reusable components.
Tailwind CSS for Fast and Elegant Styling: Speed up styling with utility-first CSS.

✨ Why Build This Project?

This ecommerce project is an excellent way to master:

Developing responsive layouts.
Using TypeScript for scalable and maintainable code.
Implementing Tailwind CSS to craft modern, visually appealing UIs.

Whether you’re a beginner or an experienced developer, this project will help you gain valuable insights into crafting dynamic web applications.

🚧 Tech Stack:

React for UI Development
Vite for Blazing-Fast Development
TypeScript for Type Safety
Tailwind CSS for Utility-First Styling

🔨 Code Overview:

Here’s a glimpse of how the app is structured:

`App.tsx`

import { useState, useEffect } from 'react';
import { Routes, Route, useLocation } from 'react-router-dom'; 
import { Cart, Footer, Navbar } from './components';
import { Home, Checkout, PlantsType, Contact, PlantDetail } from './pages';
import { useCart } from './context/CartContext';

export default function App() {
  const [isNavOpen, setIsNavOpen] = useState(false);
  const [isCartOpen, setIsCartOpen] = useState(false);
  const location = useLocation();

  const { cart, updateQuantity, removeFromCart } = useCart();
  const closeCart = () => setIsCartOpen(false);

  useEffect(() => {
    closeCart();
    window.scrollTo(0, 0);
  }, [location]);

  return (
    <div className="min-h-screen bg-sectionColor text-white font-sans relative">
      <Navbar
        isOpen={isNavOpen}
        setIsOpen={setIsNavOpen}
        cart={cart}
        toggleCart={() => setIsCartOpen(prev => !prev)}
      />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/checkout" element={<Checkout />} />
        <Route path="/plants-type" element={<PlantsType />} />
        <Route path="/plant/:plantId" element={<PlantDetail />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
      {isCartOpen && (
          <Cart
            cart={cart}
            updateQuantity={updateQuantity}
            removeFromCart={removeFromCart}
            closeCart={closeCart}
          />
      )}
      <Footer />
    </div>
  );
}

`Home.tsx`

import React from 'react';
import { HeroSection, TopSelling, CustomerReview, BestO2 } from '../components';
import plantsData from '../data/plantsData';

const Home: React.FC = () => {
  return (
    <div>
      <HeroSection />
      <main className="container mx-auto px-4 py-8">
        <TopSelling plants={plantsData} />
        <CustomerReview />
        <BestO2 plants={plantsData} />
      </main>
    </div>
  );
};

export default Home;

`Cart.tsx`

import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Button }from './';
import { CartProps } from '../types/types';
import { PlusIcon, MinusIcon, TrashIcon, XMarkIcon } from "@heroicons/react/24/solid";

const Cart: React.FC<CartProps> = ({ cart, updateQuantity, removeFromCart, closeCart }) => {
  const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
  const navigate = useNavigate(); 


  const handleCheckout = () => {
    const checkoutData = cart.map(({ id, name, price, quantity }) => ({
      id,
      name,
      price,
      quantity,
    }));

    closeCart();
    navigate('/checkout', { state: { cart: checkoutData } }); 
  };

  return (
    <div className="fixed top-16 right-0 w-full max-w-md bg-[#11170f] rounded-3xl p-4 z-50  max-h-[80vh] overflow-y-auto">
      <div className="container mx-auto px-4 py-8 relative">
        <button 
          className="absolute top-4 right-4 text-gray-300 hover:text-white"
          onClick={closeCart} 
          aria-label="Close cart"
        >
          <XMarkIcon className="h-6 w-6" />
        </button>
        <h1 className="text-3xl font-bold mb-8">Your Cart</h1>
        {cart.length === 0 ? (
          <p>Your cart is empty.</p>
        ) : (
          <div className="grid md:grid-cols-1 gap-8">
            <div className="md:col-span-1">
              {/* Scrollable container for cart items */}
              <div className="max-h-72 overflow-y-auto"> 
                {cart.map((item) => (
                  <div key={item.id} className="flex items-center mb-4 bg-[#d8ebd1] bg-opacity-30 p-4 rounded-lg">
                    <img src={item.image} alt={item.name} className="w-20 h-20 object-cover rounded-md mr-4" />
                    <div className="flex-1">
                      <h3 className="text-lg font-semibold">{item.name}</h3>
                      <p className="text-gray-300">Rs. {item.price}</p>
                      <div className="flex items-center mt-2">
                        <button 
                          className="text-gray-300 hover:text-white"
                          onClick={() => updateQuantity(item.id, Math.max(1, item.quantity - 1))}
                          aria-label="Decrease quantity"
                        >
                          <MinusIcon className="h-4 w-4" />
                        </button>
                        <span className="mx-2">{item.quantity}</span>
                        <button 
                          className="text-gray-300 hover:text-white"
                          onClick={() => updateQuantity(item.id, item.quantity + 1)}
                          aria-label="Increase quantity"
                        >
                          <PlusIcon className="h-4 w-4" />
                        </button>
                      </div>
                    </div>
                    <button 
                      className="text-gray-300 hover:text-white"
                      onClick={() => removeFromCart(item.id)}
                      aria-label={`Remove ${item.name} from cart`}
                    >
                      <TrashIcon className="h-6 w-6" />
                    </button>
                  </div>
                ))}
              </div>
            </div>
            <div className="bg-[#d8ebd1] bg-opacity-30 p-4 rounded-lg h-fit">
              <h3 className="text-xl font-semibold mb-4">Order Summary</h3>
              <div className="space-y-2 mb-4">
                <div className="flex justify-between">
                  <span>Subtotal</span>
                  <span>Rs. {total}</span>
                </div>
                <div className="flex justify-between">
                  <span>Shipping</span>
                  <span>Rs. 50</span>
                </div>
                <div className="flex justify-between font-semibold">
                  <span>Total</span>
                  <span>Rs. {total + 50}</span>
                </div>
              </div>
              <div className="flex justify-end">
                <Button text="Confirm Order" onClick={handleCheckout} />
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default Cart;

📥 Resources:

Figma Design: Check out the inspiration
Download the Code: Get the project here

👀 Connect & Share

If you find this project helpful, don’t forget to like, share, and subscribe! Let’s grow together. 🌟

Feel free to leave your feedback in the comments below. Happy coding! 🚀

DEV Community: Codex

Neubrutalism React TypeScript Tailwind Portfolio Website

Neubrutalism React TypeScript Tailwind Portfolio Website

🌿 Building Greenbank: A Modern React Vite TypeScript Responsive Website 🌿

🌿 Building Greenbank: A Modern React Vite TypeScript Responsive Website 🌿

🌿 Building Greenbank: A Modern React Vite TypeScript Responsive Website 🌿

🌿 Building Greenbank: A Modern React Vite TypeScript Responsive Website 🌿

Nextjs

Commercial Website with Next.js 15, TypeScript and Tailwind CSS 🚀

[Boost]

🌿 Building Greenbank: A Modern React Vite TypeScript Responsive Website 🌿

Commercial Website with Next.js 15, TypeScript and Tailwind CSS 🚀

Commercial Website with Next.js 15, TypeScript and Tailwind CSS 🚀

Codex ・ Jan 18

Commercial Website with Next.js 15, TypeScript and Tailwind CSS 🚀

Building a Cutting-Edge Commercial Website with Next.js 15, TypeScript, and Tailwind CSS 🚀

🌟 Project Overview

💼 Key Features

🎨 Tech Stack

📂 Structure and Dynamic Routing

🚀 Conclusion

#NextJS15 #TypeScript #TailwindCSS #CommercialWebsite #ModernWebDesign #APIBasedBlog #BusinessWebsite #ResponsiveDesign #WebDevelopment #NextJSProject #TailwindUI #WebsiteFeatures #CustomQuotePage #TechDrivenDesign

🌿 Building Greenbank: A Modern React Vite TypeScript Responsive Website 🌿

🌿 Building Greenbank: A Modern React Vite TypeScript Responsive Website 🌿

Codex ・ Dec 30 '24

Nextjs 15

Dark Portfolio: A Fully Responsive Next.js 15 + TypeScript + Tailwind CSS Project

Codex ・ Dec 22 '24

React js Portfolio

Neubrutalism React TypeScript Tailwind Portfolio Website

Codex ・ Dec 20 '24

🌿 Building Greenbank: A Modern React Vite TypeScript Responsive Website 🌿

💻 What’s Inside?

✨ Why Build Greenbank?

🔧 Tech Stack

🚀 Project Walkthrough

✨ Highlight: The Hero Section

🌟 Why Tailwind CSS?

📥 Ready to Start?

🎨 Design Inspiration:

👀 Join the Community!

🔗 Related Links

#React #Vite #TailwindCSS #WebDesign #ResponsiveDesign #ReactProject #FrontendDevelopment #ModernWebsite

🌱 Responsive Planto Ecommerce Website with React, Vite, TypeScript & Tailwind CSS 🌱

🌱 Responsive Planto Ecommerce Website with React, Vite, TypeScript & Tailwind CSS 🌱

💻 Features:

📦 What It contains:

✨ Why Build This Project?

🚧 Tech Stack:

🔨 Code Overview:

App.tsx

Home.tsx

Cart.tsx

📥 Resources:

👀 Connect & Share

Tags:

#React #Vite #TypeScript #TailwindCSS #WebDevelopment #ResponsiveDesign #reactjs #js

`App.tsx`

`Home.tsx`

`Cart.tsx`