Conduit - React + Vite + Tailwind Codebase

React + Vite + Tailwind codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API.

Demo    RealWorld

This codebase was created to demonstrate a fully fledged fullstack application built with React, Vite, TypeScript, Tailwind CSS, and shadcn/ui including CRUD operations, authentication, routing, pagination, and more.

Screenshots

Tech Stack

• Framework: React (with Vite)
• Language: TypeScript
• Styling: Tailwind CSS & shadcn/ui
• State Management: Zustand (Client state) & TanStack Query (Server state)
• Routing: React Router v7
• Forms: React Hook Form & Zod
• Rich Text Editor: Lexical
• HTTP Client: Axios

Features

• Authentication: Login, Register, JWT handling.
• Articles: Create, Read, Update, Delete (CRUD) articles.
• Rich Text Editor: Custom Lexical-based editor for writing articles.
• Comments: Comment on articles.
• Social: Follow users, favorite articles.
• Tags: Filter articles by tags.
• Profile: User profile pages with their articles and favorites.
• Responsive Design: Mobile-friendly UI using Tailwind.

Backend

This frontend application is built to consume the API provided by the Django Rest Framework Backend. Please refer to that repository for backend setup and API documentation.

Getting Started

Prerequisites

• Node.js (Latest LTS recommended)
• npm, yarn, or pnpm

Installation

1. Clone the repository.
2. Navigate to the frontend project directory:

   cd frontend

3. Install dependencies:

   npm install

Environment Setup

1. Create a .env file in the frontend directory.
2. Set the API URL (defaults to localhost if not set, but good practice to define):

   VITE_API_URL=http://localhost:8000/api

Running the App

Start the development server:

npm run dev

The application will be available at http://localhost:5173.

Building for Production

To build the application for production:

npm run build

To preview the production build:

npm run preview

Project Structure

The source code is located in frontend/src:

• components: Reusable UI components (including shadcn/ui primitives).
• hooks: Custom React hooks (React Query mutations, local storage, etc.).
• layouts: Layout wrappers (Main, Home, Profile, etc.).
• lib: Utilities, API client configuration, auth helpers.
• pages: Route components (Login, Editor, ArticleDetails, etc.).
• schemas: Zod validation schemas.
• stores: Zustand stores (User, Page persistence).
• types: TypeScript interface definitions.

License

MIT