Welcome to TurboShip

TurboShip is a template purpose built for AI code generation. It is designed to help you build applications faster and more efficiently by leveraging the power of AI. TurboShip provides a comprehensive set of tools and features that enable you to create high-quality applications with minimal effort.

Key Features

• AI Code Generation Workflow
• Prebuild Common API and Pages
• AI Supported Tech Stack for Code Generation
• Pre-Integrated Auth, Payments

Why?

This is the new age of AI. The genie is not going back in the bottle. Instead of fearing the future, we should embrace it. TurboShip aims to create a framework to works better with the AI tools, while still allowing you to have full control over your codebase.

Get TurboShip:

To start using TurboShip, follow these simple steps:

1. Sign-up for a TurboShip account: Visit our website and create your account.
   🚀 Get TurboShip
2. Pay for your TurboShip access: Activate your account by paying for your access through our stripe checkout.
3. Get Clone turboship: Github Access to the TurboShip repo should be automatically granted.
   

   git clone https://github.com/Deamoner/TurboShip

4. Start Shipping with TurboShip: Enjoy! 🚀
5. Join our Community:Discord

Getting Started

With TurboShip you will get access to the process, prompts, tools, and templates to help you get started. Additionally we encourage you to join the community.:

Installation

1. Clone the Repo or Open a new Codespace on Github:
   

   git clone https://github.com/Deamoner/TurboShip

   GitHub Link
2. Install Dependencies:
   

   npm install

3. Run the dev server:
   

   npm run dev

4. 🚀 BAM! Your already running a local site with many features builtin!

Planning

Before you start building your application, it is important to take some time to plan out your project. This will help you to identify the key features and requirements of your application, as well as any potential challenges that you may face. By taking the time to plan out your project, you can ensure that you are building an application that meets your needs and that will be successful in the long run.

1. Define your goals: Some useful questions to answer:
   Tip: I highly recommend using ChatGPT to help with this and to define a document for it. It will help.
   1. What are you trying to achieve with your application?
   2. What problems are you trying to solve?
   3. What is your ideal customer personna?
2. Research your competition: What other applications are out there that are similar to yours? What can you learn from them?
3. Write down a simple description of your app What is the core functionality of your app? What are the key features that you want to include?
4. Now throw that last step in the garbage 🗑️: Simplify to one feature. What is the one thing that your app does better than anyone else? You only need one feature to start. Focus on that.
5. Create a project plan: Have the Answers to these questions:
   1. What are the users journeys? What are the basic things they need to do in the app?
   2. What are the key things to wow the user? These you will focus on more
   3. What are the pages or views you need? Sketch mockups quick can help here
   4. What are the API you'll need to serve the front end?
   Tip: TurboShip comes ready with many of the views, and API you need. You should only need to fill out the content.
   

   Views Pre-Ready:

   • Landing
   • Dashboard
   • Signin
   • Support
   • Privacy
   • Terms of Service
   • Refune Policy
   • API
   • Docs

   API and Functionality Pre-Ready:

   • User API - Information and Security
   • Payment - Simple Integration with stripe
   • Auth
   • Database
   • Email

Configuration

TurboShip is designed to be highly configurable, while still keeping the configuration dead simply. You can easily configure most of the app specific settings in the config.ts file in the config folder. This file is the central configuration file for your application specific settings. Additionally the environmental variables are used to configure the application for different environments and to keep sensitive information secure. The design settings like theme, layout, and functionality of your application can be configured using the built-in options for tailwind. easily configure the theme, layout, and functionality of your application using the built-in options.

Configuration Options:

• /apps/config/config.ts General site configurations
• /.env.local Local Environmental Configs, for Local environment
• /apps/config/auth.ts Addition Auth Configs for NextAuth, Mostly should only need env to configure usual auth providers.
• Stripe Stripe Configs are done in the environmental variable. Then utilize the library as you see fit.
• Mongo Database Database Configs are done in the environmental variable. Then utilize the library as you see fit.
• Supabase Alternatively you can use supabase as your database provider. This can also be done in the environmental variables.
• SendGrid SendGrid Configs are done in the environmental variable. Then utilize the library as you see fit.

Creating your first service

TurboShip is designed to help you build applications faster and more efficiently by leveraging the power of AI. TurboShip provides a comprehensive set of tools and features that enable you to create high-quality applications with minimal effort. In this section, we will walk you through the process of creating your first service using TurboShip.

Setup

The first step in creating your first service is to set up your project. TurboShip provides a number of tools and templates to help you get started quickly. To create a new service, configure it and start off with a speedy development process, follow these steps:

1. Clone the TurboShip Repo or Start a Codespace:
   Either with the Git Commandline or the Github Website into the desktop client

   git clone https://github.com/Deamoner/TurboShip

   GitHub Link
2. Install Dependencies:
   

   npm install

3. Fill out site config
   Change the defaults in the config.ts file in the config folder to match your site.
4. Setup .env.local
   Copy out the .env.local.sample into .env.local and fill out the necessary information.

   cp .env.local.sample .env.local

   You will want to fill out the necessary information for your project. At minimum you will need to fill out the following:
   • 1 NextAuth Providers
   • 1 DB Provider - Mongo or Supabase
   • Stripe Keys
5. Run the dev server:
   

   npm run dev

   
   
   Great! You are now running a local site with many features builtin! Let's turn on some of the other dev features we will use at the next steps.
   
   
6. Run Storybook
   Storybook is a tool for developing UI components in isolation for React. It makes building stunning UIs organized and efficient. This will allow you to built and iterate on components compartmentalized, and then use them in your app. You'll also be able to see all of the components that are available to you built in to TurboShip already and how they work.
   

   npm run storybook

   
   In the next section we will show you how to use Storybook and AI to quickly develop your UI. Now your up and running with a basic nextjs server, and storybook.

Creating UI

The essence of TurboShip is a template built to work with AI to develop as fast as you can. TurboShip comes with a number of shadcn and TurboShip custom pre-built components and templates to help you get started quickly. You can use these components to create a beautiful and functional user interface for your application. In this section, we will walk you through the process of creating a UI for your service using the TurboShip process.

1. Utilizing Storybook
   Think of Storybook as a visual documentation tool for your components. It will allow you to see all of the components that are available to you built in to TurboShip already and how they work. You can use Storybook to build and iterate on components compartmentalized, and then use them in your app. You should beging to think of your UI in terms of views, and components. Views are the pages that the user will see, and components are the building blocks of those views. You should be able to build out your views by combining components. But you should only really break something into a component if it needs to be reused. The more you customize the components the more you will need to maintain them. So keep it simple. Generative UI is the future. However it is easier to generate full views than broken down customized components. So keep that in mind. Components will fall in one of two categories: Core Components - Ones used in general accross all sites and could perhaps be contributed back to Turboship. Simple UI components are kept in the ui folder. More complex components adding general value to all site are kept in the TurboShip folder. Custom Components - Ones that are unique to your site. You should start a folder in the components folder for your site and keep them there. In Storybook, you can see all of the components that are available to you built in to TurboShip already and how they work. Storybook consists of a few key parts:
   
   • Components - Actual Components being rendered. We keep these in the "component" folder by name of the component.
   • Stories - Different states of the components. Generally there is a stories folder for the stories, but additionally all stories end in ".stories.ts". Stories will list the different props or controls as well as usage scenarios.
2. Start the AI Code Generation
   Now let's go back to our planning and start the AI code generation process. We will use the AI to generate the code for our service based on the planning that we have done. The AI will help us to quickly create the code for our service, saving us time and effort. As the generators are better at design code generation, we start with the full views, and break them down from there. Then can look at specific components. To start the AI code generation process, follow these steps:
   
   
   Tip: I highly recommend using v0.dev as well for the Generative UI process. It will help. We have our own Generative UI:
   Check out:

   1. TurboUI
   2. v0.dev
   
   Check out: TurboUI
   
   
   Example Prompts: Web App Dashboard Page for a Newletter management system. With email editor, and user management.
   
   

   Web App Dashboard Page for a Newletter management system. With email editor, and user management.

   
   
   1. Start with the full views - Create a new file for the view inside your Components project folder. ie. "fullpage.tsx". Copy the generated component code into this file.
   2. Create the Storybook story to view and iterate it on it in Storybook before you need to configure the app. ie. "fullpage.stories.tsx".
   3. Break down to components
   Tip: Keep it simple. First breakdown the views into the navigation components, typically the header and footer. Perhaps the sidebar. Then the main content components. TurboShip comes with your standard UserMenu, Page Templates with Header and Footer, and a few other components. You can use these to build out your views.
   4. Customize the components
   5. Iterate on the UI
3. Iterate on the UI
   Now that you have generated the code for your service, you can start iterating on the UI. You can use the components and templates that you have generated to create a beautiful and functional user interface for your application. You can customize the components and templates to match your brand and design requirements. In this section, we will walk you through the process of iterating on the UI for your service using the TurboShip process.
4. Integrate the UI with your service
   Once you have created the UI for your service, you can integrate it with your application. You can use the components and templates that you have generated to create a beautiful setup in the TurboShip framework. To do this and make it reusable you'll want to follow a good process. In TurboShip we suggest that you create compartmentalized components, have your own folder for your project in the components folder. Then you can create a fullpage view of a full generated UI, and break it down into components. Or go straight to creating individual components.
   Tip: Steps for bringing the view into an app

   1. Create a file for your component in your projects folder in components
   2. Copy the component code into the file
   3. Create the story for the component in the stories folder. This allows to iterate on and compartmentalize the component. But is not necessary.
   4. Integrate in any existing components that are more functional into your to save time. An Example would be the UserMenu, BuyButton etc. You can find more details on them in the Storybook.
   5. Use the component in the view
   6. Integrate it into the app by in nextjs simply creating a folder representing the url route for the view. Any folder in "src/app" can be a view if you put a page.tsx file in it. See source for examples. See NextJS docs for further details.

Payment Acceptance

For your convenience we've integrated stripe into the TurboShip Framework. This will allow you to easily accept payments for your services. The simplest method for accepting payment is to use the BuyLinkButton component. This will allow you to easily create a button that will take the user to the stripe checkout page.

To use the BuyButton component, follow these steps:

1. Set the environmental variable for the checkout link:

   STRIPE_CHECKOUT_LINK=pk_test_51JGJj

2. Import the BuyButton component:
   

   import BuyLinkButton from "../turboship/buylinkbutton";

3. Use the BuyButton component:
   

   <BuyLinkButton className="gap-2" > 🚀 Get TurboShip </BuyLinkButton>

   Example: 🚀 Get TurboShip
   Tip: By default it will use the STRIPE_CHECKOUT_LINK environmental variable. You can also pass in a link as a prop to the component. Checkout the Storybook setup for further information on it's props.

Additionally you can use the full stripe integration. This will allow you to create a more custom payment experience. See stripes documentation for full details.

Server Actions

Server Actions are quick ways NEXTJS has built for integrating with a React frontend that NEXTjs automatically builds for. In the next section we will look at creating traditional API structures. TurboShip comes with a number of prebuilt server actions that you can use to interact with your database and other services. These server actions are designed to be easy to use and flexible, allowing you to quickly build out the backend functionality of your application. In this section, we will walk you through the process of using the server actions in TurboShip. But here is the details from NextJS:

NEXTjs Docs

1. Define Server Action:"use server" directive in an async function to mark it as a Server Action.
2. Use in Server Components:Add "use server" at the top of the function body for inline use.
3. Use in Client Components:Create a file with "use server" at the top, then import and use functions in Client Components.
4. Form Integration:Use the action attribute in <form> elements to invoke Server Actions. Handle FormData in the action.
5. Error Handling and Validation:Use HTML validation for client-side checks and libraries like zod for server-side validation.
6. Optimistic Updates and Pending States:Use useOptimistic for optimistic UI updates and useFormStatus for pending states.
7. Invoke Actions Programmatically:Use requestSubmit() to trigger form submissions programmatically.
8. Use in Event Handlers:Invoke Server Actions from event handlers like onClick.

For more detailed information, visit the Next.js documentation on Server Actions and Mutations.

Creating API

TurboShip comes with a number of prebuilt API routes that you can use to interact with your database and other services. These API routes are designed to be easy to use and flexible, allowing you to quickly build out the backend functionality of your application. In this section, we will walk you through the process of using the API routes in TurboShip.

1. Define API Routes:
   API routes are defined in the api folder in the root of your project. Each file in the api folder represents a different API route. The file name is the route path, and the file exports a function that handles the route.
   Example GET Route:

   import { NextApiResponse } from "next";
   export const dynamic = 'force-dynamic'
   export async function GET(req: Request, response: NextApiResponse) {
       try {
           return Response.json({message: 'API Response'});
       }
       catch (error) {
           console.error(error);
           return Response.json({ error: error});
       }
   }

2. Use API Routes:
   You can use the API routes in your application by making requests to the appropriate route. The API routes are designed to be easy to use and flexible, allowing you to quickly build out the backend functionality of your application. The simplest form of that is the built in fetch function. Here is a simple example getting the user info example:

   fetch("/api/user")
   .then((response) => response.json())
   .then((data) => {
       console.log(data);
       setIsActivated(data.activated);
   })
   .catch((error) => {
       console.error(error);
   });

3. Integrate with your application:
   You can integrate the API routes with your application by making requests to the appropriate route. The API routes are designed to be easy to use and flexible, allowing you to quickly build out the backend functionality of your application. We will be adding more in and common approaches as we develop them.

Handling Auth

TurboShip comes with a built-in authentication system that you can use to secure your application. The authentication system is designed to be easy to use and flexible, allowing you to quickly build out the authentication functionality of your application. We used NEXTAUTH for the authentication system. This is a great system that allows you to easily integrate with many different authentication providers. You can use the built-in providers or create your own custom provider. For more detailed information, visit the NextAuth documentation on NextAuth. In this section, we will walk you through the process of using the authentication system in TurboShip.

1. Set Env Variables for Predefined Providers:
   

   Predefined Providers are:

   • Google
   • Facebook
   • Twitter
   • GitHub
   • Spotify
   • Discord
   • Slack
   • Apple
   • Auth0
   • Okta
   • OneLogin

   GITHUB_ID=your_id
   GITHUB_SECRET=your_secret

2. Use the Pre-Built Components:
   

   Use the built-in components for your user menus. You can use the built-in providers or create your own custom provider.

   import { UserMenu } from '../TurboShip/usermenu'; 

3. Integrate with your application pages:
   

   You can utilize the useSession hook from NextAuth to check session information that is wrapped in a SessionProvider. An example:

   import { useSession } from 'next-auth/react';

   export default function UserMenu() {
       const [user, setUser] = useState<any>(null)
       const {data: session} = useSession();
       useEffect(() => {
           if (session) {
               setUser(session.user)
           }
         }, [session])

4. Integrating it into your API:
   

   You can use the getUserSession from NextAuth to get the user session information. This can be used to check if the user is authenticated and to get the user information.

   import { getUserSession } from 'next-auth/react';

   export async function GET(req: Request, response: NextApiResponse) {
   const session = await getServerSession(authOptions);
   if (session) {
       return Response.json({message: 'API Response', user: session.user});
   }
   else {
       return Response.json({message: 'API Response', user: null});
   }
   }

For more detailed information, visit the NextAuth documentation on NextAuth.

Deploying

TurboShip is designed to be easy to deploy to a number of different platforms. You can deploy your application to Vercel, Netlify, or any other platform that supports Next.js. In this section, we will walk you through the process of deploying your application using TurboShip. As NEXTjs was written for vercel, it is the easiest to deploy to vercel. However it can be deployed to any platform that supports NEXTjs. We are assuming you are using GitHub and will go through the process for setting and deploying to vercel, including migrating your environmental variables, ensuring your mongo has access, and commit to Github for the deployment.

1. Setup the Vercel Project:
   

   First, you will need to set up a new project on Vercel. You can do this by logging into your Vercel account and creating a new project. You will need to link your GitHub account to Vercel and select the repository that you want to deploy.

2. Set the Environmental Variables:
   

   Next, you will need to set the environmental variables for your project. You can do this by going to the settings tab in your Vercel project and adding the environmental variables that you need. You will need to add the same environmental variables that you have in your local .env.local file.

3. Deploy the Project:
   

   Once you have set up your project and added the environmental variables, you can deploy your project to Vercel. You can do this by clicking the deploy button in the Vercel dashboard. Vercel will build and deploy your project automatically.

4. Check the Deployment:
   

   Once your project has been deployed, you can check the deployment by visiting the URL that Vercel has assigned to your project. You should see your application running on the Vercel platform.

For more detailed information, visit the Vercel documentation on Vercel.