- Explore Generative AI models and test Copilot
- Explore common frontend and backend frameworks and understand production architecture options
- Create a base for future fullstack projects
- Backend: Django with Gunicorn
- Frontend: React (Mantine Components) + Vite
- Infra: Nginx + Docker
- AI Models: GPT-3-Turbo and GPT4o. Will test other models in a subsequent update
-
On dev
- run Vite using
npm run dev
(port 5173) - run Django using
gunicorn -k gthread --bind localhost:8000 djangopod.wsgi
- run Nginx using
brew services start nginx
/sudo nginx -s reload
- uses the local Nginx config (/opt/homebrew/etc/nginx)
- run Vite using
-
On prod
- run
docker-compose up --build
- Reads docker-compose, and then runs:
- Backend Dockerfile: 3.11-alpine, adds envs, collects static, exposes port 8000 using Gunicorn. Not running nginx yet.
- Frontend Dockerfile: npm run build and then launches nginx using nginx.conf on frontend. Exposes port 3000. Proxy set up: when /api/ is hit on the frontend, redirects to the backend Docker service
- Nginx service: Can be accessed at 8080. Not really necessary right now since we don't need to load balance or anything yet. Consider: rate limiting, SSL/TLS termination, other security controls
- run
This frontend template comes with the following features:
- PostCSS with mantine-postcss-preset
- TypeScript
- Storybook
- Vitest setup with React Testing Library
- ESLint setup with eslint-config-mantine
dev
– start development serverbuild
– build production version of the apppreview
– locally preview production build
typecheck
– checks TypeScript typeslint
– runs ESLintprettier:check
– checks files with Prettiervitest
– runs vitest testsvitest:watch
– starts vitest watchtest
– runsvitest
,prettier:check
,lint
andtypecheck
scripts
storybook
– starts storybook dev serverstorybook:build
– build production storybook bundle tostorybook-static
prettier:write
– formats all files with Prettier