KO'DJ - Koreyadagi O'zbek Dasturchilar Jamiyati

📖 Description

KO'DJ - ya'ni Koreyadagi O'zbek Dasturchilar Jamiyati bo'lib KO'DJ web sahifasi orqali dev uchrashuvlar, uchrashuvlarni topish va ularga ro'yhatdan o'tish va uchrashuvlar bo'yicha sarhisoblarni yoritib boruvchi va KO'DJ jamiyatini ravnaqi yo'lida xizmat qiluvchi web safiha hisoblanadi.

🚀 Getting Started

Prerequisites

• npm (v8 or higher)
• Node.js (v18 or higher)

Installation

# Clone the repository
git clone https://github.com/kodjdev/kodj_web_react

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:5173 to view the application in Vite's dev server.

🕹️ Main Features

• Events: Browse and register for developer meetups and events
• News: Stay updated with the latest community news
• Home: Community overview and highlights
• About: Information about KO'DJ community and its mission and purpose
• Speakers: Form to apply as a speaker for events
• Login/Authentication: Secure user authentication

🔧 Technical Stack

Frontend Architecture:

• Atomic Design Principles: We follow Brad Frost's methodology for component hierarchy:
  • Atoms: Fundamental UI components like buttons, inputs, and labels that serve as the building blocks
  • Molecules: Simple groups of UI elements functioning together (search forms, menu items)
  • Organisms: Complex UI components composed of molecules and atoms that form distinct sections of the interface
  • Templates: Page-level structures that arrange organisms into layouts
  • Pages: Specific instances of templates with real content representing the final UI

Based on our project structure and requirements, we have implemented the Atomic Design Principles to ensure a modular and scalable architecture but with a slightly different approach to make sure the project is easy to understand and maintain.

Frontend Core:

• React 18
• TypeScript
• Vite
• Ant Design
• Styled Components
• Framer Motion
• React Hook Form

State Management & Data Fetching

• Recoil: Atomic state management
• Axios: HTTP client

Internationalization

• i18next: Internationalization for language support
• react-i18next: React integration for i18next

Development Tools

• ESLint: Code linting
• Prettier: Code formatting
• TypeScript-ESLint: TypeScript-specific linting

📁 Project Structure

kodj_web_react/
├── cypress/           # End-to-end testing
├── node_modules/
├── src/               # Application source code
│   ├── @types/        # i18n types
│   ├── atoms/         # Recoil atoms
│   ├── components/    # Atom, Molecule, and Organism components
│   │   ├── Button/
│   │   ├── Card/
│   │   ├── Error/     # Error handling components
│   │   ├── Event/
│   │   ├── Footer/
│   │   └── ...
│   ├── context/       # React contexts
│   ├── i18n/          # i18n configuration
│   ├── utils/         # Constants and utils functions
│   ├── static/        # Static assets
│   ├── hooks/         # Custom React hooks
│   ├── i18n/          # Internationalization
│   ├── pages/         # Application pages
│   │   ├── About/
│   │   ├── Events/
│   │   ├── Home/
│   │   └── ...
│   ├── tools/         # Predefined Colors and Styles
│   └── router/        # Routing configuration
└── vite.config.ts     # Vite configuration

🔄 Build & Deployment

# Build for production
npm run build

# Preview production build locally
npm run preview

# Lint code
npm run lint

# Format code
npm run format

📚 Available Scripts

npm run dev         # Start development server
npm run build       # Build for production
npm run preview     # Preview production build
npm run lint        # Lint code with ESLint
npm run format      # Format code with Prettier

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/comment-feature)
3. Commit your changes (git commit -m 'feat: added real time commenting feature')
4. Push to the branch (git push -u feature/comment-feature)
5. Open a Pull Request

📝 License

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