Awesome
<p align="center"> <img src="./.github/images/alpack-logo.png" alt="ALPack" width="400"> </p> <h1 align="left">🚀 ALPack</h1><h2 align="center">Welcome to our all-in-one solution for building efficient web applications using some of the hottest technologies right now!</h2> <p align="center"> <a href="https://github.com/apptension/alpack"> <img src="https://img.shields.io/github/v/release/apptension/alpack?style=for-the-badge" alt="Version"> </a> <a href="https://github.com/apptension/alpack"> <img src="https://img.shields.io/github/license/apptension/alpack?style=for-the-badge" alt="License"> </a> <a href="https://twitter.com/apptension"> <img src="https://img.shields.io/twitter/follow/apptension?style=for-the-badge&logo=twitter" alt="Follow Us on Twitter"> </a> <a href="https://discord.apptension.com"> <img src="https://img.shields.io/discord/1122849885335597088?style=for-the-badge&logo=discord" alt="Chat with us on Discord"> </a> </p>aka Apptension Light Pack ;)
🌟 Features
- GraphQL API: Cutting-edge data query and manipulation.
- Authentication and Authorization: Ensure your app's security.
- Emails with React: Dynamic email generation has never been easier.
- Mantine UI: A modern, responsive user interface built with Mantine.
🔧 Tech Stack
We've handpicked the following stack for optimal performance, scalability, and developer experience:
- Frontend: React, Next.js, Apollo Client, Storybook, Mantine, React Email
- Backend: Node.js, TypeScript, GraphQL, Apollo Server, TypeORM, TypeGraphQL, NextAuth.js
- Database: Postgres
- Other tools: jest, NX, pnpm
🏗 Infrastructure
- Seamless Vercel Deployment
- Streamlined CI/CD with GitHub Actions or Bitbucket Pipelines
- Docker integration for development environment
🚀 Getting Started
- Clone the repository.
- Generate Google OAuth credentials (default correct authorized URL should be set to:
http://localhost:3000/api/auth/callback/google
). - Prepare
.env
andapps/app/.env
files based on the.env.shared
examples. Fill them with Google OAuth credentials. - Install dependencies:
pnpm install
- Create Docker container:
docker volume create {PROJECT_NAME}-web-backend-db-data
.PROJECT_NAME
needs to be the same as set in.env
file in step 3. - Launch Docker:
docker compose up -d
- Fire up the Next.js app:
pnpm nx run app:serve
- Dive in! Visit
https://localhost:3000
and start coding.
📂 Project Structure
.
├── ...
├── apps # Primary directory for Next.js apps
│ └── app # Main Next.js web application - landing page & application
├── packages # Directory for shared packages
│ ├── api-client # Apollo Client and FE schema configuration
│ ├── core # Core components and providers
│ ├── emails # React-email components
│ ├── graphql-api # ORM models and GraphQL API schema
│ └── internal # Internal packages directory
└── ...
⚙️ Commands
-
Run Locally:
- Start Docker:
docker compose up -d
- Start Next.js app:
pnpm nx run app:serve
- Start Docker:
-
Storybooks:
pnpm nx run app:storybook
-
Tests: Check
test
andtest:watch
scripts inpackage.json
. -
🗂 Migrations:
- Create new empty migration:
packages/schema > pnpm run db:createmigration src/migrations/[migration_name]
- Generate new migration based on the db changes:
packages/schema > pnpm run db:makemigrations src/migrations/[migration_name]
- Execute migrations:
packages/schema > pnpm run db:migrate
- Create initial migration::
packages/schema > pnpm run typeorm migration:generate -d ./src/data-source.ts src/migrations/init
- Create new empty migration:
💌 Emails
:warning: Be aware that command below might fail for a first time in your pnpm workspace according to the react-email GitHub issue. To solve it you might need to run
yarn install
in thepackages/emails/.react-email
directory.
packages/emails > pnpm dev
🚀 Deployment
- Go to Vercel and create a team
- Create a Postgres Database storage. Make sure to use
POSTGRES
environment variables prefix. - Create a project with:
- Root directory set to:
apps/app
Next.js
set up asFramework preset
- Root directory set to:
- Create a Google OAuth credentials with the correct redirect url (
https://{VERCEL_DOMAIN}/api/auth/callback/google
) - Add environment variables to in the app
Settings
tab - Assign the postgres storage to the project
🔗 Useful Documentation
🌍 Who are we?
We're Apptension, a team that turns ideas into world-class software using expertise in technology, design, and product management. We work with founders, investors, and creative agencies to help them bring uncommon ideas to the market.
Our partners value our outside-the-box thinking, clear and honest communication, and reliability – even in the most dynamic and time-compressed projects. Among our clients – plenty of early-stage startups, as well as international tech behemoths like Netflix and Uber. We live and breathe tech – and we're darn good at it.
To bring even more value to our partners, we create bespoke tools (like SaaS Boilerplate and ALPack), allowing us to shorten time-to-market while avoiding technical debt.
License
ALPack is licensed under the MIT License.
Contributing to ALPack project
We welcome contributions from anyone interested in improving ALPack. Please keep in mind that this project follows a Code of Conduct to ensure a welcoming community for all.
For more detailed information on how to contribute to this project, please refer to our Contributing Guide.
If you have any questions about contributing, please join our Discord server - we are happy to help you!
Thank you for considering contributing to ALPack!