UI_niverse

UI_niverse is a collection of frontend projects designed to help students and developers enhance their frontend development skills. This repository provides inspiration, reference, and hands-on practice for mastering the art of frontend development.

Features

• React + TypeScript: Built with modern technologies to ensure scalability and maintainability.
• Vite: Fast and efficient development environment with hot module replacement (HMR).
• TailwindCSS: Utility-first CSS framework for rapid UI development.
• Reusable Components: Modular and reusable components like Navbar, Footer, Grid, and SparklesText.
• Routing: React Router for seamless navigation between pages.
• Dark Mode Support: TailwindCSS-based dark mode for better user experience.

Project Structure

UIniverse/
├── public/                # Static assets
├── src/                   # Source code
│   ├── components/        # Reusable UI components
│   │   ├── ui/            # Core UI components
│   │   └── WeatherApp/    # Example project folder
│   ├── lib/               # Utility functions
│   ├── routes/            # Application routes
│   ├── assets/            # Project-specific assets
│   ├── App.tsx            # Main application layout
│   ├── main.tsx           # Application entry point
│   └── index.css          # Global styles
├── package.json           # Project dependencies and scripts
├── tsconfig.json          # TypeScript configuration
├── vite.config.ts         # Vite configuration
└── README.md              # Project documentation

Getting Started

Follow these steps to set up and run the project locally:

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/ArDnath/UI_niverse.git
   cd UI_niverse

2. Install dependencies:

   npm install

Development

Start the development server:

npm run dev

Open your browser and navigate to http://localhost:5173 to view the application.

Build

To create a production build:

npm run build

The build output will be available in the dist directory.

Preview

To preview the production build:

npm run preview

Components

Navbar

A responsive navigation bar with a logo and social media links.

Footer

A simple footer with copyright information.

GridBackground

A reusable component for creating grid-patterned backgrounds.

SparklesText

A dynamic text component with animated sparkles for visual appeal.

Contributing

Contributions are welcome! If you have ideas for new projects or improvements, feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Author

Created by Ariyaman Debnath. Connect with me on GitHub or Twitter.