Skip to content

GenericSuite Example Application

ExampleApp is a full-stack example application demonstrating a modern web application architecture with multiple backend services and a React-based frontend implementing GenericSuite.

It is inspired by the principles of Caloric Deficit. The purpose is to achieve weight loss goals and maintain a better lifestyle, based on proper nutrition.

ExampleApp let users:

  • Record their preferred food ingredients, recipes, and daily meals
  • Keep track their calorie consumption
  • AI-powered experiences to the users by letting them to communicate by voice, text, or image uploads to a specialized assistant called ExampleApp Bot, which is based on large language models, speech-to-text, text to image and image to text technologies.

The application is structured as a monorepo using TurboRepo.

🚀 Features

  • Frontend: Modern React application with Vite

  • Backend Options:

  • FastAPI (Python)

  • Flask (Python)

  • Chalice (Python)

  • Development Tools:

  • pnpm for package management

  • TurboRepo for monorepo management
  • Environment-based configuration

🛠️ Prerequisites

Software

Services

Database

If you plan to use MongoDB:

AWS account and credentials

If you plan to deploy the App in the AWS Cloud and/or use DynamoDB:

🚀 Getting Started

Installation

  1. Clone the repository:
git clone https://github.com/tomkat-cr/genericsuite-basecamp.git
cd genericsuite-basecamp
  1. Install dependencies:
# Install pnpm if not already installed
npm install -g pnpm

Configuration

  1. Copy environment files:
# Automatically copy environment files
make exampleapp-init-env-files

# Manually copy environment files
# cp apps/ui/.env.example apps/ui/.env
# cp apps/api-fastapi/.env.example apps/api-fastapi/.env
# Repeat for other services as needed (api-flask, api-chalice)

  1. Update the environment variables in each .env file according to your setup.

  2. To select the backend implementation (FastAPI, Flask, Chalice), in the apps/ui/.env file set the BACKEND_LOCAL_PORT variable to the port of the API you want to use.

# Chalice API
BACKEND_LOCAL_PORT=5001
# FastAPI API
# BACKEND_LOCAL_PORT=5011
# Flask API
# BACKEND_LOCAL_PORT=5021

**Note:** Once changed the `BACKEND_LOCAL_PORT` variable, press Ctrl-C to stop the development servers and run `make exampleapp-run` again.
  1. Use https: by default the application will use http (non-secure), if you want to use https:
    • Set the RUN_PROTOCOL variable to https in the apps/ui/.env, apps/api-fastapi/.env, apps/api-flask/.env, apps/api-chalice/.env files.
    • Generate a self-signed certificate and keys (only once):
make exampleapp-create-ssl-certs

**Note:** Once changed the `RUN_PROTOCOL` variable, press Ctrl-C to stop the development servers and run `make exampleapp-run` again.

  1. Use "webpack": by default the application will use "vite", if you want to use "webpack":

    • Uncomment the line RUN_METHOD="webpack" in the apps/ui/.env.

    Note: Once changed the RUN_METHOD variable, press Ctrl-C to stop the development servers and run make exampleapp-run again.

🏃‍♂️ Running the Application

Development Mode

Start the development servers:

make exampleapp-run

Start a new GenericSuite project

In the following instructions, we will create a new GenericSuite project using the GenericSuite Basecamp repository as a template. Let's say we want to create a new project called "myapp" and the base directory is "~/dev".

  1. Start a new project directory. E.g. "myapp":
mkdir ~/dev/myapp
cd ~/dev/myapp
git init
npm init -y
# or pnpm init -y
  1. Clone the GenericSuite Basecamp repository:
cd ~/dev
git clone https://github.com/tomkat-cr/genericsuite-basecamp.git
cd genericsuite-basecamp
  1. Copy the sample app:
cp -r genericsuite-basecamp/docs/Sample-Code/exampleapp ~/dev/myapp
  1. Install dependencies:
cd ~/dev/myapp
make install

  1. Configure the environment variables following the instructions in the Configuration section.

  2. Run the application:

make run

📂 Project Structure

The exampleapp directory is located in the ./docs/Sample-Code directory. It contains the following structure:

exampleapp/
├── apps/
│   ├── api-chalice/      # AWS Chalice backend API
│   ├── api-fastapi/      # FastAPI backend API
│   ├── api-flask/        # Flask backend API
│   ├── config_dbdef/     # Database configuration
│   └── ui/               # React frontend application
├── packages/             # Shared packages
├── scripts/              # Utility scripts
├── .gitignore
├── package.json
├── pnpm-lock.yaml
└── turbo.json

🤝 Contributing

  1. Fork the GenericSuite Basecamp repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

📄 License

This project is licensed under the terms of the MIT license.

👏 Acknowledgements

Credits

This project is developed and maintained by Carlos J. Ramirez. For more information or to contribute to the project, visit GenericSuite on GitHub.

Happy Coding!