This project is a time capsule to record relevant moments of your life, allowing you to register some text or media that remembers an event on a specific date. In addition, all memories are arranged on a timeline. The application was developed at Rocketseat's Next Level Week (NLW) event.
View web and mobile application layout in Figma
This project has a mobile version developed with React Native and Expo (with Expo Router), in addition to using NativeWind (TailwindCSS for React Native) for styling. In addition, the web front-end uses React.js in conjunction with Next.js (with App Routes) and also with Tailwind. The back-end uses Node.js and the Fastify framework, together with Prisma ORM to communicate with the database and Docker to up the PostgreSQL container. The application also uses an oAuth authentication model through GitHub.
First, you will need to clone the project repository. Next, you'll need to get your oAuth client credentials from GitHub. For that, you need to create two apps on GitHub Developer, one for the web app and one for the mobile app.
When creating oAuth applications on GitHub it is important to add a callback url, used by GitHub to redirect the user back to the application after login. Therefore, configure these callback urls as shown below.
On the app oAuth web, put this callback url: http://localhost:3000/api/auth/callback
On the app oAuth mobile, put this callback url: exp://<your local IP address>:19000
This mobile app url can also be found in the console when running the app with Expo.
You can consult the GitHub documentation for more details.
On the backend, install the dependencies.
npm i
Then run the command to upload the Docker container with PostgreSQL.
docker compose up -d
Then create an .env
file in the root folder of the backend following the .env.example
format. When filling in the database connection url, prefer to use the local IP of your machine on the network, instead of localhost.
Finally, run the prisma command to run all migrations on the database.
npx prisma migrate deploy
If you want, you can also visualize the database through Prisma Studio.
npx prisma studio
Now run the application with the command:
npm run dev
On the front-end, also install the dependencies and set the environment variables in an .env.local
file following the example of the .env.local.example
file. You will need to provide the client id of the web application you created on GitHub, in addition to the base url of the front-end and the base url of the API. I also recommend putting your machine's local IP instead of localhost in the NEXT_PUBLIC_API_BASE_URL
.
Now run the application with the command:
npm run dev
Finally, in the mobile application, install the dependencies and then add the base url of the api to an .env
file, also preferring to use the local IP of your machine, in addition to adding the client id of the mobile application created on the GitHub platform.
Now run the application with the command:
npm start
This mobile application uses Expo, so you can use an Android or iPhone emulator on your computer, or if you prefer, you can use the Expo Go application to scan the QR Code generated when running the application and thus test the application on your own cell.
Luรญs Miguel | LinkedIn
#NeverStopLearning ๐