search

RihanArfan / bereal-web

Web version of BeReal - WIP
https://bereal.pages.dev
7 stars 0 forks source link
bereal cloudflare-pages cloudflare-workers nuxt tailwindcss tanstack-query typescript vue vueuse

readme

BeReal

BeReal 📸🕑⏳ as a progressive web app. - https://bereal.pages.dev

📢 This project is undergoing a major rewrite and currently does not work.

What is BeReal

BeReal is the simplest photo sharing app to share once a day your real life in photo with friends. Every day at a different time, everyone captures a photo within 2 minutes. Capture and post in time to discover what your Friends are up to.

Why does BeReal Web exist

BeReal's Android app was originally really poorly designed, unlike their iOS app. I took it upon myself to create a platform agnostic PWA using their iOS app design. Since starting the project, BeReal's Android app UI has been updated to match their iOS app (🎉).

This project still exists since it works on any device, including laptops and tablets.

Preview

Sketches

BeReal Web Wireframe by @RihanArfan

Built with:

Developing

BeReal does not offer a public API and made it difficult to find values their source code, so they aren't include in this source code. BeReal Web handles these values server side only through environment variables. If you need them, you're probably technical enough to find them yourself, at which point also look here.

Recommended IDE Setup

VSCode + Volar

In editors, we need to make the TypeScript language service aware of .vue types. We'll use Volar's Take Over Mode. You can enable it by the following steps:

  1. Disable the built-in TypeScript Extension
    1. Run Extensions: Show Built-in Extensions from VSCode's command palette
    2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
  2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Install Dependencies

Make sure to install the dependencies:

pnpm install

Development Server

Start the development server on http://localhost:3000

pnpm run dev

Production

Build the application for production:

pnpm run build

Locally preview production build:

npm run preview

Check out the deployment documentation for more information.

Lint with ESLint

pnpm run lint