Turbomac screenshot

Turbomac

Author Avatar Theme by Ljq0226
Updated: 23 Sep 2023
295 Stars

A powerful Typescript fullstack project simulated Mac Desktop

Categories

Overview:

The project detailed in the content is a technical stack involving technologies such as Next.js 13, Zustand, Tailwind CSS, Framer-motion, Nest.js, Prisma, MySQL, Socket.io, TurboRepo, TurboPack, and Netlify. The project showcases benefits like TypeScript usage, full-stack development with the latest technologies, TurboRepo for structural management, component-based development with clear code logic, and clean and elegant design with rich animation effects.

Features:

  • TypeScript: Utilization of TypeScript for enhanced type checking and code quality.
  • Full-Stack Development: Using the latest technologies like Next.js 13, TurboPack, and RSC for a comprehensive full-stack development experience.
  • TurboRepo: Efficiently managing project structure for better organization and scalability.
  • Component-Based Development: Implementing a component-based approach for clear code logic and ease of maintenance.
  • Clean and Elegant Design: Designing simple yet sophisticated web pages for a visually appealing user experience.
  • Rich Animation Effects: Incorporating various animation effects to enhance user interactions and visual appeal.
  • Contextual Menu: Adding a global right-click context menu for improved user navigation efficiency.

Installation:

  1. Clone the GitHub repository to your local machine.

    git clone [repository_url]
    
  2. Navigate to the project directory and install dependencies in both client and server folders.

    cd [project_directory]
    npm install
    cd client
    npm install
    cd ../server
    npm install
    
  3. Create .env files in the client and server directories with relevant configurations.

  4. Initialize the database and generate Prisma client.

    cd server
    npx prisma migrate dev --name init
    prisma generate
    
  5. Run the client and server separately or use the recommended method.

    # Recommended method
    cd client
    npm run dev
    cd ../server
    npm run dev
    
    # Alternatively, run from the root directory
    turbo dev
    
  6. Access the application at http://localhost:3000 to view the web pages.

Summary:

The project demonstrates a modern technical stack utilizing various cutting-edge technologies to deliver a sophisticated web development experience. By leveraging features like TypeScript, TurboRepo, and rich animation effects, the project aims to provide users with a clean, elegant, and interactive web application. The installation process involves cloning the repository, setting up the environment, and running the client and server components to access the application locally, showcasing a blend of frontend and backend development practices.