Bandung Developer Community Website
๐ง This web app is still in early and active development
Check out:
- Web: https://bandungdev.com
- Repo: https://github.com/bandungdevcom/bandungdev.com
- Progress: https://github.com/orgs/bandungdevcom/projects/1
- Discover community team and members
- Explore various events, online and offline/onsite
- Search for jobs and companies
Figma link: https://www.figma.com/file/UXLCWrL8yvpqoUCxY5vOGs/BandungDev.com-UI
- Read about Remix and the Remix Docs to understand about Remix.
- If new, focus on Remix basics. Read Super Simple Start to Remix.
- If experienced, use various integration such as Prisma ORM and database like MySQL. Read Blog Tutorial (short) and App Tutorial (long).
- TypeScript: Typed language
- Related to JavaScript, HTML, CSS
- React: UI library
- Remix: Full stack web framework
- React Router: Routing
- Tailwind CSS: Styling
- Radix UI: Interactive components
- shadcn UI: Styled interactive components
- Prisma: Database ORM
- PlanetScale: MySQL-compatible serverless database
platform
- MySQL: Database management system (DBMS)
- Docker: Containerization
- Docker Compose: Multi-container Docker
- Vercel: Web app deployment
Use later:
Don't use:
- styled-components, @emotion, Stitches, Chakra UI, MUI, etc
- TanStack/React Query, SWR, Axios, etc
- Redux, Zustand, Jotai, XState, etc
Use pnpm to improve productivity and replace npm, so make sure pnpm is installed:
npm i -g pnpm
To run the app locally, make sure the project's local dependencies are installed:
pnpm install
Format, lint, and build to check if the setup is fine:
pnpm check
# run: format lint stylelint build typecheck
pnpm check:fix # to fix most cases if there's an issue
# run: format:fix lint:fix stylelint:fix
Note: Ignore non-critical warning about ESLint and TypeScript
Prisma ORM is used to communicate with the database easily. Since this app is primarily using PlanetScale, the migration files are not needed. Therefore, push the schema directly there, then the migration will be handled through the deploy requests.
Also read:
If prefer using Docker and Docker Compose for local development, follow this guide.
Create the .env
file from the example .env
file.
cp -i .env.example .env
This .env file is only for local development, not production
Let's configure the required environment variables in the .env
file if local,
otherwise in the project settings, for:
DATABASE_URL
SESSION_SECRET
For the database, either choose to use PlanetScale or local Docker container. If prefer using Docker and Docker Compose for local development, follow this guide.
If not using any local database, create a PlanetScale
account to have a MySQL instance for development. After the database has been
created, "Get the connection string" and select "Prisma", then copy the full
DATABASE_URL
.
Keep in mind the free plan only allow for 1 database. So either later keep it, delete it when unused, or upgrade the plan.
Generate a random string for the SESSION_SECRET
using
openssl rand -base64 32
on the terminal or put any long random text.
DATABASE_URL="mysql://username:[email protected]/bandungdev?sslaccept=strict"
SESSION_SECRET="random_secret_text"
Sync between Prisma schema and the database directly, by making schema changes
with prisma db push
, which can be done regularly while updating the models:
pnpm db:push
# prisma db push
Even with local development without PlanetScale, pushing the schema directly is
still okay when
prototyping the schema.
After a success push, then it will automatically run prisma generate
.
Create users.json
in prisma/seed-credential
folder with the format below.
You can focus on certain users who want to be able to sign in in development, so
it doesn't have to be everyone. Password is also optional as there is an
authentication method with OAuth that is not require a password.
[
{
"fullname": "User One",
"email": "[email protected]",
"username": "username",
"imageURL": "https://picsum.photos/200",
"tags": ["TEAM", "DEVELOPER"],
"role": "Fullstack web developer",
"affiliation": "Google",
"bio": "Full Stack Web Developer with JavaScript, Node.js, TypeScript, React"
},
{
"fullname": "User Two",
"email": "[email protected]",
"username": "username2",
"imageURL": "https://picsum.photos/200",
"tags": ["TEAM", "ADVISOR"],
"role": "Software engineer",
"affiliation": "Google",
"bio": "Software engineer with 5 years experience"
}
// ...
]
Then seed the initial data when needed:
pnpm db:seed
# prisma db seed
Check if the build is fine. This als be used to build the app for production.
pnpm build
# remix build
This will also run
prisma generate
too before the build
Then try run the app in production mode:
pnpm start
This repo has been officially deployed to Vercel and hosted at https://bandungdev.com
If everything works fine, start the Remix development server like so:
pnpm dev
# remix dev
This starts the app in development mode, rebuilding assets on file changes.
Open up http://localhost:3000 and it should be ready to go!
Regularly, either push or generate the schema after changing the Prisma schema or database models.
pnpm db:push
# prisma db push
pnpm db:gen
# prisma generate
To keep the dependencies up to date, use taze.
pnpm dlx taze
# or if installed globally
taze
This repo has been setup to auto deploy to Vercel automatically on Git push. Can also be deployed to other new projects on Vercel.
After having run the create-remix
command and selected "Vercel" as a
deployment target, import the Git repository into
Vercel.
Configure the required environment variables in project settings for:
DATABASE_URL
SESSION_SECRET
Then deploy it. There should be the deployed URL like https://bandungdev.vercel.app.
Remix app setup:
(Ordered by join date)
No | Nick | Full Name | Username | Role |
---|---|---|---|---|
1 | Haidar | M Haidar Hanif | @mhaidarhanif | Lead, Full Stack Web Developer, UI/UX Designer |
2 | Hendi | Hendi Santika | ... | Software Developer |
3 | Didiet | Didiet Pambudiono | @didietap | Infra Engineer |
4 | Fikri | Fikri Alwan | @FikriAR19 | Frontend Web Developer |
5 | Abui | Abui Muliadi | @abuiiam | Frontend Web Developer, UI/UX Designer |
6 | Rizky | Rizky Alam | @rizkyalamz | Backend Web Developer, Infra/System Engineer |
7 | Raka | Raka Pratama | @tamagossi | Full Stack Web Developer |
8 | Rijal | Muhamad Rijal | @MhdRijal | Full Stack Web Developer |
9 | Agus | Agus Wesly | @aguswesly | Full Stack Web Developer |
10 | Rendi | Rendi Bayu Setiawan | @straynekoren | Full Stack Web Developer |
11 | Maahir | M. Maahir Maulana | @maulana48 | Backend Web Developer |
12 | Obi | Obi Pranata | @obipranata | Full Stack Web Developer |