facemask: A mini social media app for sharing Pandemic experiences 😷📱 3/n

Alladin M. Melico — Wed, 06 Jan 2021 08:34:47 +0000

What I built

A mini social media app for sharing Pandemic experiences. Post you thoughts, follow users, chat with them, easily see their posts on your news feed and a lot more!

Category Submission:

Program for the People 🙌

App Link

facemask

Screenshots

Landing Page
Registration
Login
Dashboard
Update profile cover and create Post
Edit and delete post
Comments
Chat
Tags
Search

Description

Tech Stack

backend: Laravel 8
frontend: Vue
UI framework: Vuetify
SPA: Inertia JS
Scaffolding: Laravel Jetstream
Realtime feature: Pusher

Features

BREAD of posts
Comments system
Real-time chat
See user's status(Staying at home, Covid Positive, Tested Negative, Under Quarantine, A survivor, Vaccinated, and a verified Doctor)
Followings, likes, post bookmark
Global search on posts, comments, and users.
Dashboard for showing stats and newsfeed.

Link to Source Code

https://github.com/alladinmelico/facemask

Permissive License

MIT license

Background

In the Philippines, it's been 10 months of lockdown due to this pandemic. I live in one of the world’s longest and strictest lockdowns . Due to our adoption on this new normal, we somehow experience being alone. So I thought maybe I could make something that at least make someone feel that that he/she is not alone. A community that emotionally helps a person survive this pandemic.

How I built it

I use Heroku for most of my app's deployment platform before. The user experience of DigitalOcean's App Platform is not new to me. However, I was amazed on how they made it easier to deploy an app. Before, I have to set up a Procfile and my .htaccess on the public folder. I have to input each db config in the env variables. I need to even deploy my app through Heroku CLI since deploying it through the website causes errors (some users also experienced it as I read it on multiple forums). But in DigitalOcean's App Platform, I don't need to experience those headaches. Services are straightforward to use even with no video tutorial. One of the things that I also noticed was how less frequent I need to run into forums when using App Platform. I also personally like the UI. One thing I was challenged to do is to find resources or communities that could answer some of the queries. Well, that's how I expected it to be since the platform is relatively new. But overall, the experience was great! The best part is that I got lots of new skills.

Additional Resources/Info

If you are building app using Laravel 8 here are some configs that might help you:

the default database database.php is mysql and it comes with charset of utf8mb4. The default dabase in the App Platform is pgsql it expects the charset to be utf8. So might encounter an error if you deploy your Laravel 8 app with all those defaults.
I had to set all the routes to https since App Platform serves your app with Https. Put this in AppServiceProvider.php

if (env('APP_ENV') === 'production') {
    \Illuminate\Support\Facades\URL::forceScheme('https');
}

Just a reminder (for those who new to deploying app), all the variables you used in the .env file should be put on App Platform's env variables.

facemask progress 2/n

Alladin M. Melico — Tue, 15 Dec 2020 10:43:51 +0000

hasError ❌

My initial stack is Laravel 8 with Jetstream, Vue, Inertia.js and Tailwind. I had difficulties maintaining this kind of setup. It was challenging for me to debug. I also have to figure out if I have to fix the frontend or the backend.

I need to rollback 🔙

I decided to settle on a server-side rendered app. I used Breeze instead of Jetstream. Blade will be used for templating and I’ll be using vanilla JS for minimal interactions. Blade UI Kit and Tailwind for styling. If I still have time, I’ll be building the API and completely separating my frontend. For now, I need a minimum viable product as soon as possible.

isSuccess ✅

Deployed it already on the DigitalOcean.
Auth (just used the Breeze)
A functioning multilevel nested comments system.

facemask: A mini social media app for sharing Pandemic experiences 😷📱 1/n

Alladin M. Melico — Mon, 14 Dec 2020 06:58:42 +0000

What I'm building

I'll list all features on my last post. Basically, this is a mini socmed app just to share people's experiences during this pandemic. About their struggles to quarantine themselves, how we miss the old normal, and how we can all survive.

Category Submission:

Program for the People 🙌

Just about me

For this year, this is the third DigitalOcean sponsored hackathon that I joined. I hope I can finally pull this off. GLHF everyone!

DEV Community: Alladin M. Melico

facemask: A mini social media app for sharing Pandemic experiences 😷📱 3/n

What I built

Category Submission:

App Link

Screenshots

Description

Link to Source Code

Permissive License

Background

How I built it

Additional Resources/Info

facemask progress 2/n

hasError ❌

I need to rollback 🔙

isSuccess ✅

facemask: A mini social media app for sharing Pandemic experiences 😷📱 1/n

What I'm building

Category Submission:

Just about me