facemask: A mini social media app for sharing Pandemic experiences 😷📱 3/n
Tags: dohackathon, laravel, vue, webdev
Published: 2021-01-06 08:34:47

---
series: facemask on DigitalOcean App Platform Hackathon
---

## 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](facemask-tyi4m.ondigitalocean.app)

### Screenshots
 * Landing Page
![Landing Page](https://dev-to-uploads.s3.amazonaws.com/i/ixbbxqtqmfojhy1rfb3f.gif)

 * Registration
![Registration](https://dev-to-uploads.s3.amazonaws.com/i/rs1m4o3q5udro4vxtiaq.gif)

 * Login
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fx0roqgk9sp83vh2e1zx.gif)

 * Dashboard
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9ksqqzoyyajac0fcv1o9.gif)

 * Update profile cover and create Post
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/la4i7l6lrbzemka0u93s.gif)

 * Edit and delete post
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z17miic0hnmiycyurbvo.gif)

 * Comments
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/74qr4pdbx7ci70awycte.gif)

 * Chat
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mokfhkk637i5tonj7j9b.gif)

 * Tags
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uvs6myc301mo6dsnnlhk.gif)

 * Search 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/29b6e79yqd1io10ujclq.gif)


### Description
**Tech Stack**
 * backend: [Laravel 8](https://laravel.com/docs/8.x)
 * frontend: [Vue](https://vuejs.org/)
 * UI framework: [Vuetify](https://vuetifyjs.com/en/)
 * SPA: [Inertia JS](https://inertiajs.com/)
 * Scaffolding: [Laravel Jetstream](https://jetstream.laravel.com/1.x/introduction.html)
 * Realtime feature: [Pusher](https://dashboard.pusher.com/) 

**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](https://opensource.org/licenses/MIT)

## 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
```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.