Public React Native code for the DormView app

Last update: Nov 22, 2021

DormView

Not all schools provide photos of their dorm rooms, and it can be difficult for students to know what to bring or how to prepare when they don't know what their room is going to look like. Our goal is to make this process easier, as well as allow students to show off their cool dorm designs!

Visit the DormView Website to download the app on iOS and Android!


Technical Details

This is just a brief overview, see About This Project below. Additionally, the public repo for this project does not contain all of the code, just the majority of the React Native code. This project was made with React Native Bare Workflow, so there are small amounts of native code here and there, as well as several configuration files that are not in this repo.

Front End

  • React Native Bare Workflow
  • JavaScript/TypeScript

Back End

  • Supabase
    • PostgreSQL 13
    • AWS Cloud Storage
    • GoTrue Auth
  • Google Firebase
    • Cloud Functions
    • Cloud Messaging (push notifications)

About This Project

This project started in March 2021 as something fun to do at school during COVID-19 restrictions. I wanted some personal experience to put on my resume, but I also wanted to make something that could be useful for college students. I ended up coming up with this idea, and I'm really happy with how it turned out.

I started out with little to no JavaScript/TypeScript or React knowledge, so it took me a while to get used to coding in a new language. Many tutorials later, I had a few working features, and it was time to decide how to structure the app. I wanted to make it as simple as possible, for both me and users, so I decided on a system where users could search for their school, and if the app didn't have it, allow them to request it. Same goes for dorms. For photos, users first navigate to their dorm building, and then can either add a photo to the building in general or add it to a specific room. To allow for content moderation, any requested items are marked as "pending" and must be approved by me or another moderator. While a school or dorm is pending, however, users can still add to it.

Once I had a working app, I worked on separating out the visual components and finalizing the UI design. Once most of the main screens were done, I transitioned to figuring out how to set up the backend for storing user photos and school/dorm data.

The project originally started out being hosted on Google Firebase, as I have had experience with it in the past for various smaller projects. However, as the project progressed I realized that a NoSQL database was not the correct structure for the type of data I had. My data, schools, dorms, and photos, was very relational, each dorm had photos, each school had dorms, each user owned photos, and so on. Keeping this in Firebase would have led to very high usage charges for reading and querying separate documents for each of these individual items.

I began looking around for a way to store my data in a relational SQL database. From what I could find, many cloud-hosted options seemed complicated and expensive, and for this project I wanted to focus mostly on frontend development. I eventually stumbled across Supabase, an online hosted PostgreSQL database with very reasonable pricing. I decided to try it out, and it ended up working out quite well for me.

As someone at the time with almost no SQL experience, setting up a database and making tables was extremely easy. As I began to become more comfortable, I really liked how Supabase allows you to write SQL code and have full control of your database if desired. This allowed me to set up row level security rules and create triggers to send users notifications when their photos are approved. I also decided to use Supabase for file storage (for user photos) as well, since it would integrate with the database and allow me to link photo table entries with links to photo files, as well as set up security rules for accessing photos. Supabase also provided a simple authentication api which integrated with the SQL database as well.

This isn't an ad for Supabase by the way, I just think they're really cool and you should check them out :)

For push notifications, I stuck with Firebase Cloud Messaging as it was free and easy to set up. I simply send a POST request from the Supabase database to a Firebase Cloud Function that sends a notification whenever a school/dorm/photo is approved.

Finally, I added in Google AdMob and Google Analytics to serve ads in the app to monetize it and provide a way for me to keep track of its progress. Monetezation was not a main goal for this project whatsoever, but I figured it couldn't hurt. I tried to place ads in as non-instrusive of a way as possible.


Next Steps

The next steps for me for this project are to create a web app which provides the same features as the mobile app in order to allow users to browse and share photos from their computers. I haven't gotten around to this yet, but I'm hoping that I will be able to reuse much of the mobile app React Native code in a React web app.


Questions? Feedback?

I'd love to hear from you! Any communication should be sent to [email protected]

GitHub

https://github.com/jgfino/dormview-public
You might also like...

React component for highlighting js and jsx code with copy to clipboard functionallity

React component for highlighting js and jsx code with copy to clipboard functionallity

✨ 🖍️ React Highlight ✨ 🖍️ React component for highlighting js and jsx code wit

Mar 29, 2022

The starter code for the final assessment project for Udacity's React & Redux course

Employee Polls Project This is the starter code for the final assessment project

Mar 17, 2022

✨ A template code for creating react component or JS module npm packages.

✨ A template code for creating react component or JS module npm packages.

React Package Template A template code repo for creating react component or JS npm packages. Just follow few steps and you can start publishing your c

May 2, 2022

Atividades da Short Class Web React do Let's Code Pass

Short_Class_Web_React Atividades da Short Class Web React do Let's Code Pass Iniciar repostiorio git git init Adicionar os arquivos para stagin git ad

Jan 10, 2022

💥A cross-platform Node.js based CLI that generates boilerplate code for different tailwind web applications.

💥A cross-platform Node.js based CLI that generates boilerplate code for different tailwind web applications.

💥A cross-platform Node.js based CLI that generates boilerplate code for different tailwind web applications.

Apr 8, 2022

This project is collection of large projects's source code (codebases), built with Reactjs. Eg: Bestbuy, Postman, Trello, Udacity, Coursera, Skillshare, Invision, Intercom, Pipedrive, ... and more.

This project is collection of large projects's source code (codebases), built with Reactjs. Eg: Bestbuy, Postman, Trello, Udacity, Coursera, Skillshare, Invision, Intercom, Pipedrive, ... and more.

This project is collection of large projects's source code (codebases), built with Reactjs. Eg: Bestbuy, Postman, Trello, Udacity, Coursera, Skillshare, Invision, Intercom, Pipedrive, ... and more.

May 15, 2022

Practice code-typing with top 1000 keywords of the most popular programming languages.

Practice code-typing with top 1000 keywords of the most popular programming languages.

code-type Typing practice for programmers Practice code-typing with top 1000 keywords of the most popular programming languages. Getting Started These

Apr 25, 2022

Hypertool: a low-code platform for building internal tools quickly

Hypertool Hypertool is a low-code platform for building internal tools quickly. Hypertool combines multiple components to provide a simple interface f

May 5, 2022

TypeScript basics, Compiler & Configuration, working with Next-gen JS Code, Classes & Interfaces;

TypeScript basics, Compiler & Configuration, working with Next-gen JS Code, Classes & Interfaces; Advanced Types & TypeScript Features, Generics, Decorators; Full Project culminating this learning adventure; Working with Namespaces & Modules, Webpack & TypeScript, Third-Party Libraries & TypeScript.; React + TypeScript, NodeJS + TypeScript

Dec 27, 2021
Chrome extension boilerplate (with React + TypeScript). Preconfigured with SASS, separated `public` directory, support multilingual

Chrome Extension Boilerplate (with React + TypeScript) Quickly build chrome extensions using TypeScript and React. 1. What's included This repository

Jun 13, 2021
Basic React+Django application for the game 'Tombola'. The code has been rushed for Christmas eve, you will not find efficient nor optized code.

Tombola Basic React+Django application for the game 'Tombola'. The code has been rushed for Christmas eve, you will not find efficient nor optimized c

Dec 30, 2021
A repo for the Code the Dream React - Egret students' collaborative work on a React app.
A repo for the Code the Dream React - Egret students' collaborative work on a React app.

WhatToDo App A Todo App Built on Next.js Project by the CTD Practicum - Slaty Egret team Overview Code the Dream offers free intensive training in sof

Mar 1, 2022
A CLI tool to clean out boilerplate code created by create-react-app

Clean React Clean React is a CLI tool that removes and modifies some of the boilerplate files and code that are being generated when initiating a new

Apr 20, 2022
Simple React-Native boilerplate code in Typescript for getting started with a new project quickly. It has all the essentials that one would require in a project.

react-native-boilerplate-typescript Simple React-Native boilerplate code in Typescript for getting started with a new project quickly. It has all the

Feb 25, 2022
Ini adalah kumpulan source code belajar website React JS dari Channel Youtube Prawito Hudoro, Materi CRUD React MERN
Ini adalah kumpulan source code belajar website React JS dari Channel Youtube Prawito Hudoro, Materi CRUD React MERN

MERN Basic Indonesia Screenshot Aplikasi Dokumentasi API https://documenter.getpostman.com/view/10749611/UVXbvKqe Pengertian MERN Mongo DB Adalah suat

Apr 19, 2022
A complete set up of the React application with Typescript, Webpack 5, Babel v7, SSR, Code Splitting and HMR.

A complete set up of the React application with Typescript, Webpack 5, Babel v7, SSR, Code Splitting and HMR.

May 12, 2022
A Cool VSCode extension that lets you create react component files/folders instantly with boilerplate code. It also handles imports/exports on its own.
A Cool VSCode extension that lets you create react component files/folders instantly with boilerplate code. It also handles imports/exports on its own.

React Component Generator v1.0.0 A cool VSCode extension that lets you create your component's files/folders instantly with boilerplate code. Also aut

Apr 14, 2022
Code snapshots and materials for our "React - The Complete Guide" course
Code snapshots and materials for our

Code snapshots and materials for our "React - The Complete Guide" course

May 18, 2022
📚 Learn React + Redux by building a SoundCloud Client. Full tutorial included. Source Code for main tutorial but also extensions included.

react-redux-soundcloud I wrote a huge tutorial about setting up your own SoundCloud Client in React + Redux. Additonally you can find a real world exa

May 7, 2022