Skip to content

Latest commit

 

History

History
80 lines (57 loc) · 2.44 KB

DEVELOPMENT.md

File metadata and controls

80 lines (57 loc) · 2.44 KB
Raw

Development Guide for Wraglet

Welcome to the development guide for Wraglet, a Next.js 13.4 application built with TypeScript and App Router. This guide will help you set up your development environment and provide an overview of the project structure and workflow.

Prerequisites

Make sure you have the following tools installed on your system:

Setting Up the Development Environment

  1. Clone the Repository:

    git clone https://github.com/Wraglet/wraglet.git
cd Wraglet

  2. Install Dependencies:

    npm i

  3. Setup .env file

    MONGODB_URI = 'your-mongodb-url'

NEXTAUTH_SECRET = 'any-long-string'
ABLY_API_KEY = 'your-ably-api-key'

# AWS
AWS_ACCESS_KEY_ID_PROD='your-aws-key-id'
AWS_SECRET_ACCESS_KEY_PROD='your-aws-secret-access-key'
AWS_REGION_PROD='select-aws-region'
AWS_S3_BUCKET='name-of-your-aws-s3-bucket'

Project Structure

  • /src: Contains the source code of the Next.js application.
    • /app: Next.js pages and routes using App Router.
      • /components: React components used across the application.
      • /api: Next.js API routes.
      • /utils: Utility functions and helper scripts.
      • /types: TypeScript type declarations.
      • /interfaces: TypeScript interface declarations.
  • /public: Static assets like images, fonts, and other files.
  • /node_modules: Node.js modules and dependencies.
  • /next.config.js: Next.js configuration file.
  • /tsconfig.json: TypeScript configuration file.

Development Workflow

  1. Start the Development Server:

    npm run dev   # If you use npm
# OR
yarn dev      # If you use Yarn

  2. Access the Application: Open your browser and navigate to http://localhost:3000 to view the application.

  3. Development Tasks:

    • Create new components and pages inside the /src directory.
    • Implement features, fix bugs, and update styles.
    • Run tests and ensure code quality before submitting contributions.
    • Commit your changes and create pull requests following the contribution guidelines.

Additional Information

  • For more details about Next.js, visit the Next.js documentation.
  • Refer to the CONTRIBUTING.md file for guidelines on contributing to this project.

Happy coding! 🚀