🏯 BandungDev.com

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

Concept

• Discover community team and members
• Explore various events, online and offline/onsite
• Search for jobs and companies

UI Design

Figma link: https://www.figma.com/file/UXLCWrL8yvpqoUCxY5vOGs/BandungDev.com-UI

Getting Started

1. Read about Remix and the Remix Docs to understand about Remix.
2. If new, focus on Remix basics. Read Super Simple Start to Remix.
3. If experienced, use various integration such as Prisma ORM and database like MySQL. Read Blog Tutorial (short) and App Tutorial (long).

Primary Tech Stack

1. TypeScript: Typed language
   • Related to JavaScript, HTML, CSS
2. React: UI library
3. Remix: Full stack web framework
   • React Router: Routing
4. Tailwind CSS: Styling
5. Radix UI: Interactive components
   • shadcn UI: Styled interactive components
6. Prisma: Database ORM
7. PlanetScale: MySQL-compatible serverless database platform
   • MySQL: Database management system (DBMS)
8. Docker: Containerization
   • Docker Compose: Multi-container Docker
9. Vercel: Web app deployment

Use later:

• Vitest vs Jest
• React Testing Library
• Playwright vs Cypress

Don't use:

• styled-components, @emotion, Stitches, Chakra UI, MUI, etc
• TanStack/React Query, SWR, Axios, etc
• Redux, Zustand, Jotai, XState, etc

Development

Dependencies

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

Code

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

Database

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:

• Prisma with PlanetScale
• PlanetScale with Prisma

If prefer using Docker and Docker Compose for local development, follow this guide.

Environment Variables

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:password@aws.connect.psdb.cloud/bandungdev?sslaccept=strict"
SESSION_SECRET="random_secret_text"

Schema to Push

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.

Data for Credentials

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": "user1@example.com",
    "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": "user2@example.com",
    "username": "username2",
    "imageURL": "https://picsum.photos/200",
    "tags": ["TEAM", "ADVISOR"],
    "role": "Software engineer",
    "affiliation": "Google",
    "bio": "Software engineer with 5 years experience"
  }
  // ...
]

Data for Seed

Then seed the initial data when needed:

pnpm db:seed
# prisma db seed

Build

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

Develop Locally

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

Checking Dependencies

To keep the dependencies up to date, use taze.

pnpm dlx taze
# or if installed globally
taze

Deployment

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.

References

Related

Remix app setup:

• 💿 Remix Indie Stack
• 🚀 Epic Stack
• 🐶 Dogokit Remix
• 🐻 Bearmentor
• ⏪ Rewinds

Contributors

(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