Getting Started with ForgeStack

Welcome to ForgeStack! This guide will help you set up and start using ForgeStack, a Firebase-focused stack template built with Next.js.

Installation

To create a new project using ForgeStack, run the following command:


npx create-forgestack my-app
cd my-app
npm install

or using Yarn:


npx create-forgestack my-app
cd my-app
yarn install

Project Structure

After installation, your project will have the following structure:


my-app/
├── public/      # Static assets
├── src/
│   ├── app/         # (Next.js App Router)
│   ├── components/  # Reusable UI components
│   ├── context/     # User/Theme Contexts
│   ├── hooks/       # Custom Firebase hooks
│   ├── lib/         # Configuration files 
├── next.config.js   # Next.js configuration
├── package.json     # Project dependencies 
├── components.json  # Shadcn/UI component registry
└── README.md   # Project documentation

Environment Variables

Before running the app, configure your Firebase credentials in .env:


NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-auth-domain
NEXT_PUBLIC_FIREBASE__DATABASE_URL=your-database-url
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-storage-bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your-sender-id
NEXT_PUBLIC_FIREBASE_APP_ID=your-app-id


NEXT_PUBLIC_IMAGEKIT_URL_ENDPOINT=your-imagekit-endpoint
NEXT_PUBLIC_IMAGEKIT_PUBLIC_KEY=your-imagekit-public-key
NEXT_PUBLIC_IMAGEKIT_PRIVATE_KEY=your-imagekit-private-key

Note: To get Your Environment Variables, visit the Firebase Console and ImageKit Dashboard .

Running the Development Server

Once everything is set up, start the development server:


npm run dev


yarn dev

Your app will be available at http://localhost:3000.

Next Steps

Learn about Authentication
Explore Database Integration
Customize Themes

Happy coding! 🚀