{"id":15173194,"url":"https://github.com/karthikeyaspace/fullstack-boilerplate","last_synced_at":"2026-01-26T02:04:00.759Z","repository":{"id":253912123,"uuid":"844628860","full_name":"karthikeyaspace/Fullstack-Boilerplate","owner":"karthikeyaspace","description":"A highly scalable and maintainable TypeScript React boilerplate designed for rapid development of modern web applications. This project aims to provide a robust and clean code structure that can easily adapt to various use cases in frontend and backend development.","archived":false,"fork":false,"pushed_at":"2024-09-15T13:28:38.000Z","size":136,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-19T23:45:03.063Z","etag":null,"topics":["boilerplate","filestructure","firebase","nodejs","open-source","reactjs","supabase","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/karthikeyaspace.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.MD","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-19T16:42:21.000Z","updated_at":"2024-09-15T13:28:41.000Z","dependencies_parsed_at":"2024-08-22T19:05:49.041Z","dependency_job_id":null,"html_url":"https://github.com/karthikeyaspace/Fullstack-Boilerplate","commit_stats":null,"previous_names":["karthikeyaspace/fullstack-boilerplate"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karthikeyaspace%2FFullstack-Boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karthikeyaspace%2FFullstack-Boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karthikeyaspace%2FFullstack-Boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karthikeyaspace%2FFullstack-Boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/karthikeyaspace","download_url":"https://codeload.github.com/karthikeyaspace/Fullstack-Boilerplate/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239753699,"owners_count":19691160,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","filestructure","firebase","nodejs","open-source","reactjs","supabase","typescript"],"created_at":"2024-09-27T10:42:19.552Z","updated_at":"2026-01-14T16:30:15.248Z","avatar_url":"https://github.com/karthikeyaspace.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fullstack boilerplate - typescript\nA highly scalable and maintainable TypeScript React boilerplate designed for rapid development of modern web applications. This project aims to provide a robust and clean code structure that can easily adapt to various use cases in frontend and backend development.\n\n\u003e **Caution**: This project is made to give a basic understanding of structuring code files and writing clean code. Do not directly clone the repo and build. Always build from scratch.\n\n\nThis project contains code examples such as Config files, **auth context, theme context**, some **custom hooks** different pages, **supabase** authentication in frontend, protected routes, etc in client folder\n\nIn server folder, boilerplate for Ai Interation (**Gemini and Chatgpt**), custom api calls (**Google search, YT data, NYT books, Cheerio scrapper**), cors and env configuration, database initialization and crud operations (**firebase, supabase, mysql, mongodb, aws s3**), auth and logger middlewares, different routes (ai, api, auth, user, admin etc.), sending email using **nodemailer**.\n\n\n```plaintext\ndirectory structure\n/full stack boilerplate\n│\n├── /client                   # React TypeScript Client\n│   ├── /public               # Public assets\n│   ├── /src\n│   │   ├── /assets           # Images, Fonts, Data etc.\n│   │   ├── /components       # Reusable React components\n│   │   ├── /config           # env and axios configuration\n│   │   ├── /contexts         # Auth, Theme contexts etc.\n│   │   ├── /hooks            # Custom React hooks\n│   │   ├── /pages            # React pages\n│   │   ├── /services         # API service, auth calls\n│   │   ├── /types            # Type exports for typescript\n│   │   ├── /utils            # Uuid, validator functions etc.\n│   │   ├── App.tsx           # Main App component\n│   │   ├── index.css         # Central css file        \n│   │   ├── main.tsx          # Entry point for React\n│   │   ├── vite-env.d.ts     # React environment definitions\n│   ├── .env                  # Environment variables\n│   ├── .gitignore            # Ignore files of git\n│   ├── index.html            # Single html file of react \n│   ├── package.json          # React client dependencies and \n│   ├── tailwind.config.json  # Tailwind configuration file \n│   ├── tsconfig.json         # Typescript configuration file \n│   ├── vite.config.json      # Vite configuration file \n\n\n├── /server                   # Root server directory\n│   ├── /dist                 # Build files\n│   ├── /src\n│   │   ├── /ai               # Ai initializaton and integration\n│   │   ├── /api              # Interation with public api's\n│   │   ├── /config           # Cors and env configuration.\n│   │   ├── /controllers      # Route controllers\n│   │   ├── /db           # db initialization\n│   │   ├── /middlewares      # Verify token, logger middleware etc\n│   │   ├── /routes           # Express routes\n│   │   ├── /services         # Business logic and services\n│   │   ├── /types            # TypeScript types and interfaces\n│   │   ├── /utils            # Utility functions\n│   │   ├── index.ts            # Express app configuration\n│   │   ├── server.ts         # Server entry point\n├── /tests                    # Unit and integration tests\n├── .env                  # Environment variables for server\n├── .gitignore            # Ignore files of git \n├── package.json          # Server dependencies and scripts\n├── tsconfig.json         # TypeScript configuration\n│\n```\n\n## General understanding\n### Client \n\nThe client side of this project is built using React with TypeScript. The goal is to create a structured and scalable codebase that is easy to maintain and extend. The main focus areas include:\n\n**Components**: Reusable UI components that can be used throughout the application. \\\n**Contexts**: Centralized state management using React Context API. Examples include authentication, theme management, etc. \\\n**Hooks**: Custom hooks encapsulate reusable logic, making the code cleaner and more modular. \\\n**Services**: This layer is responsible for making API calls and handling side effects. It abstracts the network requests, allowing the components to focus on rendering logic. \\\n**Pages**: Each page represents a view in the application. Pages are composed of multiple components and handle the layout and data-fetching logic. \\\n**Config**: Configuration files, such as environment variables and Axios instances, are centralized for easier management and scalability. \\\n**Utils**: Utility functions that can be reused across the application for various tasks like validation, formatting, and more.\n\n\n### Server\n\nThe server side of this project is built using Node.js with TypeScript and Express. The architecture is designed to be clean, modular, and scalable. Here's how the request flow works:\n\n**Routes**: Defines the routes/endpoints of the API. Routes interact with controllers and middleware to process requests. \\\n**Middleware**: Middleware functions intercept requests before they reach the controllers. Examples include authentication checks, request validation, CORS, etc. \\\n**Controllers**: Controllers handle incoming requests by interacting with the service layer. They do not interact directly with the database. \\\n**Services**: This layer contains the business logic of the application. Services interact with the database and other external APIs to fetch and manipulate data. \\\n**Database**: The database initialization and configuration are handled in this layer. It provides connection management and query execution. \\\n**Config**: Centralized configuration for CORS, environment variables, and other server-related settings. \\\n**AI**: This directory contains the initialization and integration logic for any AI models or services you might use. \\\n**Utils**: Utility functions that provide common functionality across the server-side codebase, such as logging, error handling, etc. \n\n#### Request flow example\n```\nUser sends request\n-\u003e Routes -\u003e Middleware -\u003e Controllers -\u003e Services -\u003e Response\n``` \n**Routes**: Define the available endpoints and handle routing to the appropriate controller. \\\n**Middleware**: Perform tasks like authentication, input validation, and CORS management. \\\n**Controllers**: Act as intermediaries between the routes and services, managing the logic for handling requests. \\\n**Services**: Contain the core business logic and interact directly with the database.\n\n## Contributing\nContributions are welcome! Please follow these steps to contribute:\n\n1. Fork the repository.\n2. Create a new branch for your feature or bug fix.\n3. Commit your changes and push the branch to your fork.\n4. Create a Pull Request to merge your changes into the main branch of the original repository.\n5. Please refer to the CONTRIBUTING.md file for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkarthikeyaspace%2Ffullstack-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkarthikeyaspace%2Ffullstack-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkarthikeyaspace%2Ffullstack-boilerplate/lists"}