Microblog

No guarantees that any of this works. I'm new at this and experimenting. Built on top of Remix's Indie Stack. Database query organisation might be a hot mess. Uses Nodemailer to send email confirmation codes.

👉 Microblog Staging Demo

Features

Not all "Popular Microblogging Site" features are replicated, but here's what currently should work:

• Creating accounts and sending verification emails
• Deleting accounts (and all their posts)
• Creating posts
• Deleting posts (and all it's likes)
• Liking/unliking posts
• Reposting/unreposting posts
• Following/unfollowing users
• Verification badges for users
• Replying to posts
• Seeing replies to a post
• Seeing list of people who liked a post
• Seeing list of people who reposted a post
• Seeing a list of users followings
• Seeing a list of users followers
• Updating profile info (name, bio, website, avatar url, cover url, etc)
• Automatic dark/light mode support
• Somewhat reasonable responsiveness
• Most if not all features work with JavaScript disabled

Development

• Initial setup:

  npm install

• Start dev server:

  npm run dev

  • Delete and reset database:

  rm prisma/data.db
  npx prisma db push
  npx prisma db seed

This starts your app in development mode, rebuilding assets on file changes.

The database seed script creates a few new users with some data you can use to get started:

Users:

• Saul: [email protected] / password
• Mike: [email protected] / password
• Lalo: [email protected] / password

ENV

Create .env file with

DATABASE_URL="file:./data.db?connection_limit=1"
SESSION_SECRET="some-random-secret"
GMAIL_EMAIL="[email protected]"
GMAIL_PASSWORD="your-gmail-password"

Deployment

Two GitHub Actions handle automatically deploying your app to production and staging environments.

Prior to your first deployment, you'll need to do a few things:

• Install Fly

• Sign up and log in to Fly

  fly auth signup

  Note: If you have more than one Fly account, ensure that you are signed into the same account in the Fly CLI as you are in the browser. In your terminal, run fly auth whoami and ensure the email matches the Fly account signed into the browser.

• Create two apps on Fly, one for staging and one for production:

  fly create microblog
  fly create microblog-staging

  • Initialize Git.

  git init

• Create a new GitHub Repository, and then add it as the remote for your project. Do not push your app yet!

  git remote add origin <ORIGIN_URL>

• Add a FLY_API_TOKEN to your GitHub repo. To do this, go to your user settings on Fly and create a new token, then add it to your repo secrets with the name FLY_API_TOKEN.

• Add a SESSION_SECRET to your fly app secrets, to do this you can run the following commands:

  fly secrets set SESSION_SECRET=$(openssl rand -hex 32) --app microblog
  fly secrets set SESSION_SECRET=$(openssl rand -hex 32) --app microblog-staging

  If you don't have openssl installed, you can also use 1password to generate a random secret, just replace $(openssl rand -hex 32) with the generated secret.

• Create a persistent volume for the sqlite database for both your staging and production environments. Run the following:

  fly volumes create data --size 1 --app microblog
  fly volumes create data --size 1 --app microblog-staging

Now that everything is set up you can commit and push your changes to your repo. Every commit to your main branch will trigger a deployment to your production environment, and every commit to your dev branch will trigger a deployment to your staging environment.

Connecting to your database

The sqlite database lives at /data/sqlite.db in your deployed application. You can connect to the live database by running fly ssh console -C database-cli.

GitHub Actions

We use GitHub Actions for continuous integration and deployment. Anything that gets into the main branch will be deployed to production after running tests/build/etc. Anything in the dev branch will be deployed to staging.

Linting

This project uses ESLint for linting. That is configured in .eslintrc.js.

Formatting

It's recommended to install an editor plugin (like the VSCode Prettier plugin) to get auto-formatting on save. There's also a npm run format script you can run to format all files in the project.