Skip to content

FullStack app using Typescript in Nodejs, React and React Native. Github for authentication and Prisma with postgres for DB.

Notifications You must be signed in to change notification settings

andrei-ce/spacetime

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Intro

This is a Fullstack application using Typescript in NodeJS for the BE, NextJS for FE and React Native for mobile. It let's you login through OAuth using your github account and upload pictures and videos to a time-line based UI.

To-do:

  • Connect to an external storage system
  • Add better error handling
  • Better configuration on backend to work simultaneously with web and mobile app
  • Better configuration on mobile app so it does not depend on your specific IP address

Login page web

Timeline page web

Upload memory page web


Upload memory page mobile


Running locally

To run this project locally, you will need to do the following steps in the project root directory, depending if you want to run it on web or mobile. The processes are different because when using expo for hosting this app locally, we don't have access to http://localhost:PORT. Therefore you will need to create and change both GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET when swaping FE clients.

Running on web

  1. Run npm install
  2. Add environment variables to a .env file as suggested in the .env.example file
    2.1 Create a github oauth app for web only at https://github.com/settings/developers and store both GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET
    2.2 Insert both values in a server/.env file (comment the mobile values if you did that first)
    2.3 Add the GITHUB_CLIENT_ID string to web-app/.env.local, with a prefix, like so NEXT_PUBLIC_GITHUB_CLIENT_ID, as exemplified in .env.local.example
  3. Run npx prisma migrate dev on the server root directory
  4. Run npm run dev both on the server and web-app root directory
  5. Access http://localhost:3000/ on your browser

Running on mobile

  1. Run npm install
  2. Add environment variables to a .env file as suggested in the .env.example file
    2.1 Create a github oauth app for mobile only at https://github.com/settings/developers and store both GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET.
    2.1.1 When creating this app, set the Homepage URL to http://localhost:3000 and Authorization callback URL to exp://<your ip address>:19000 2.2 Insert both values in a server/.env file (comment the web values if you did that first)
    2.3 Add the GITHUB_CLIENT_ID string to cofiguration object of the useAuthRequest function, under the clientId key in app/index.tsx file
  3. Add your ip address to lib/api.ts
  4. Run npx prisma migrate dev on the server root directory
  5. Run npm run dev on the server root direrctory
  6. Run npm run start on the mobile-app root direrctory
  7. Access the Expo app on your mobile & scan the QR code displayed on the terminal. Make sure you are in the same wi-fi network as your local machine.

About

FullStack app using Typescript in Nodejs, React and React Native. Github for authentication and Prisma with postgres for DB.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published