Public React Native code for the DormView app

Overview

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]

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

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

✨ 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

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

Personal portfolio inspired by VS Code and Github, using React, Context API, html and CSS
Personal portfolio inspired by VS Code and Github, using React, Context API, html and CSS

Personal portfolio inspired by VS Code and Github, using React, Context API, html and CSS

Paper is a unified interface for defining components for Vue and React using a single code base.

Inkline - Paper Unified interface for defining components for Vue and React using a single code base. Inkline is written and maintained by @alexgrozav

This package contains the source code of the React components for the Cloudscape Design System.

React components for Cloudscape Design System This package contains the source code of the React components for the Cloudscape Design System. Cloudsca

💥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.

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.

Owner
Julia Finocchiaro
Julia Finocchiaro
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

Hieu Nguyen (Jack) 6 Aug 28, 2022
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

null 3 Dec 30, 2021
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

Chung Kao 1 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

Meike Hankewicz 15 Jun 14, 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

Numanqmr 10 Sep 10, 2022
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

Rifki Ramadhan 3 Jun 6, 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.

null 22 Aug 5, 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.

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

Udit Kumar 7 Aug 31, 2022
Code snapshots and materials for our "React - The Complete Guide" course

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

Academind 3.9k Sep 26, 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

Robin Wieruch 281 Aug 18, 2022