alexandrecpedro / spacetime

Time Capsule platform for web and mobile - NLW Spacetime

NLW Spacetime

The Project • Target • Technologies • Route • How to Use

📓 The Project

NLW Spacetime platform to recall memory, where the user can add texts, photos and videos of important events in his life to a timeline, organized by month and year (web platform and mobile)

💡 Target

Development of an NLW Spacetime platform to recall memory, where the user can add texts, photos and videos of important events in his life to a timeline, organized by month and year (web platform and mobile versions) at NLW (Next Level Week), from Rocketseat

🛠 Technologies

The following tools were used in building the project:

Type	Tools	References
IDE	VS CODE	https://code.visualstudio.com/
Design Interface Tool	FIGMA (Prototype - UX/UI)	https://www.figma.com/
Programming Language (Frontend)	REACT	https://reactjs.org/
Programming Language (Mobile)	REACT NATIVE	https://reactnative.dev/
Programming Language (Backend, Frontend, Mobile)	TYPESCRIPT	https://www.typescriptlang.org/
React web framework (Frontend)	NEXT.JS	https://nextjs.org/
API and backend services (Backend)	NODE.JS	https://nodejs.org/
NodeJS web framework (Backend)	FASTIFY	https://www.fastify.io/
Open source API development ecosystem (Testing)	HOPPSCOTCH	https://hoppscotch.io/
Open source platform (Mobile)	EXPO BARE WORKFLOW	https://expo.dev/
Utility-first CSS Framework (Frontend)	TAILWIND CSS	https://tailwindcss.com/
Tool for transforming CSS with JavaScript	POST CSS	https://postcss.org/
Graphic components (Frontend, Mobile)	LUCIDE-REACT	https://lucide.dev/
UI Utility-first Component Library (Mobile)	NATIVE BASE	https://nativebase.io/
Navigation between pages (Mobile)	REACT NAVIGATION	https://reactnavigation.org/
Database (Backend)	SQLITE	https://www.sqlite.org/index.html
Promise based HTTP client - browser & Node.js	AXIOS	https://axios-http.com/
Node.js and TypeScript ORM (Backend, Database)	PRISMA	https://www.prisma.io/

Backend | API

Testing

Database

IDE

UX/UI

Frontend

Mobile

🔎 Route

1. Part 1 - Starting the project end-to-end
   
   • Build the project prototype: https://www.figma.com/file/G8PUN4pJqzxEzxPNd7eP5z/C%C3%A1psula-do-tempo-%E2%80%A2-Trilha-Ignite-(Community)?type=design&node-id=205-3&t=7bhiHbk0QWYK3QZT-0
   • Install VS Code (IDE)
   • Install VS Code extensions: NodeJS, Prisma, Tailwind CSS IntelliSense, PostCSS Language Support, Symbols, Fluent Icons, GitLens, ESLint, DotENV
   • Backend project
     • Create a new project: mkdir backend
     • Enter backend project: cd backend
     • Install Node and start: npm init -y
     • Install Fastify framework: npm i fastify
     • Configure server and ports: ./src/server.ts
     • Install TypeScript for development environment:
       • npm i typescript -D
       • npx tsc --init (Settings file for TS)
       • npm i tsx -D (Automatically updates)
       • Change ts config file: ./tsconfig.json
     • Configure the package.json: ./package.json
     • Run the application: npm run dev
     • Define "Use Cases"
     • Set routes: ./src/server.ts
     • Install plugins: npm i @rocketseat/eslint-config prettier-plugin-tailwindcss -D
     • Install and set Prisma
       • Install (for development): npm i prisma -D
       • Install Prisma Client: npm i @prisma/client
       • Set Database SQLite: npx prisma init --datasource-provider SQLite
       • Create tables and entities: ./prisma/schema.prisma
       • Run migrations: npx prisma migrate dev
         • Name for the new migration: create the rest of the tables
         • Name for the new migration: create users table
         • Name for the new migration: create relations
       • To see DB generated from Prisma: npx prisma studio
       • Generate: npx prisma generate
   • Frontend project
     • Create the frontend project (React, Next.js and TypeScript): npx create-next-app@latest frontend --use-npm
     • Build the project: npm run build
     • Install plugins: npm i @rocketseat/eslint-config prettier-plugin-tailwindcss -D
     • Use prettier-eslint: ./prettier.config.js
     • Customize contents, themes, fonts and plugins with Tailwind: ./tailwind.config.js
     • Customize the main style: ./src/app/styles/global.css
     • To run project: npm run dev
   • Mobile project
     • Install "R Component" extension at VS Code
     • Install Expo CLI: npm install --global expo-cli
     • Create a new project: npx create-expo-app mobile
     • Navigate to project directory: cd mobile
     • Open the project on VS Code: code .
     • Change App.js to App.tsx
     • Run app and accept download TS libs: npm start
     • Install Nativewind: npm i nativewind
     • Set TailwindCSS:
       • Install plugin: npm i tailwindcss -D
       • Initialization: npx tailwindcss init
     • Set ESLint:
       • Install plugins: npm i @rocketseat/eslint-config eslint -D
       • Create and set file: ./.eslintrc.json
     • Set Prettier:
       • Install plugin: npm i prettier-plugin-tailwindcss -D
       • Create and set file: ./prettier.config.js
     • Run Expo Go: npx expo start
     • Install Native Base on project:
       • npm install native-base
       • npx expo install react-native-svg
       • npx expo install react-native-safe-area-context
     • Start the development server: npx expo start
     • Configure the Expo Go on a mobile device or use an emulator
     • Open the app on a mobile device:
       • On your iPhone or iPad, open the default Apple "Camera" app and scan the QR code you see in the terminal
       • On your Android device, press "Scan QR Code" on the "Projects" tab of the Expo Go app and scan the QR code you see in the terminal.


2. Part 2 - Advancing the backend and frontend
   
   • Backend project
     • Define "Use Cases"
     • Set Prisma structure
       • Migration
         1. Reset the previous migration: npx prisma migrate reset
         2. Run migrations: npx prisma migrate dev
            • Name for the new migration: create the rest of the tables
            • Name for the new migration: create memories table
            • Name for the new migration: create relations
       • Open Prisma Studio: npx prisma studio
       • Create Seed: ./prisma/seed.ts
       • Run seed: npx prisma db seed
   • Zod: npm i zod
   • Memory CRUD: ./src/routes/memories.ts
     • List
     • Create
     • Detail
     • Update
   • Cors library (Protection for non-desirable access)
     • Install CORS: npm i @fastify/cors
   • Frontend project
     • Set Google Fonts
       • Layout: ./src/app/layout.tsx
       • CSS: ./src/app/globals.css
       • Tailwind: ./tailwind.config.js
     • Set the Home Page: ./src/app/page.tsx
       • Blur background and Stripes: ./tailwind.config.js
       • Convert a svg file code to React component: https://svg2jsx.com/
       • Install Lucide-React icon plugin: npm i lucide-react
   • Mobile project
     • Images, theme and utils for the project:
       • Install images plugins:
         1. React Native Svg Library: expo install react-native-svg
         2. React-Native-SVG-Transformer: npm i react-native-svg-transformer -D
         3. Set: ./tailwind.config.js
         4. Comunnicate to TS image types available: ./src/assets/assets.d.ts
     • Fonts
       • Install Google Fonts: npx expo install expo-font @expo-google-fonts/roboto @expo-google-fonts/bai-jamjuree
       • Set: ./tailwind.config.js
       • Set customized font: ./App.tsx
     • Create the Splash Page
     • Use React Hooks: useState, useEffect, ...
     • Create Home screen: ./App.tsx
   
   
3. Part 3 - Integrating UI with libraries
   
   • Backend project
     • Environment variables
       1. Install package: npm i dotenv -D
       2. Github OAuth variables: ./.env
       3. Import dotenv/config at ./src/server.ts
     • Axios: npm i axios
     • JWT: npm i @fastify/jwt
     • Routes:
       • Auth route: ./src/routes/auth.ts
       • Athenticated routes
         • Set global type: ./src/auth.d.ts
         • Set auth require: ./src/routes/memoriesRoutes.ts
     • File upload
       • Fastify Multipart: npm i @fastify/multipart
       • Route: ./src/routes/upload.ts
       • Update server file: ./src/server.ts
     • Static files URL
       • Fastify Static: npm i @fastify/static
       • Set: ./src/server.ts
   • Frontend project
     • Authentication:
       1. Auth flow
          
       2. Github OAuth settings
          1. Create an application at http://github.com/settings/developers
          2. Set environment variables at: ./.env.local
       3. Getting Gihub code web
     • Set components
       1. Copyright: ./src/components/Copyright.tsx
       2. Empty memory list: ./src/components/EmptyMemories.tsx
       3. Hero section: ./src/components/Hero.tsx
       4. SignIn: ./src/components/SignIn.tsx
     • Axios: npm i axios
     • Saving token at cookies
       1. JWT lib: npm i jwt-decode
       2. Set auth lib: ./src/lib/auth.ts
     • User profile
       1. Next Config: ./next.config.js
       2. Component: ./src/components/Profile.tsx
       3. Set profile on home: ./src/app/page.tsx
   • Mobile project
     • Install Expo-Auth-Session / Expo Crypto: npx expo install expo-auth-session expo-crypto
     • Set Github OAuth (Expo)
     • Get Github code mobile: ./App.tsx
     • Save token at secure store
       1. Axios: npm i axios
       2. Expo Secure Store: npx expo install expo-secure-store
       3. Implementing: ./App.tsx
     • User navigation
       • Install React Navigation / Expo Router on project:
         • npx expo install expo-router
         • npx expo install expo-linking
         • npx expo install expo-constants
         • npx expo install expo-status-bar
         • npx expo install react-native-screens
         • npx expo install react-native-safe-area-context
       • Create and set App file: ./app/index.tsx
       • Use Expo Router
   • Testing
     • Test backend at Hoppscotch: https://hoppscotch.io/


4. Part 4 - Integrating web and mobile projects
   
   • Frontend project
     • Routes
       • Set route layout: ./src/app/layout.tsx
       • Logout route: ./src/app/api/auth/logout/route.ts
     • New memory page: ./src/app/memories/new/page.tsx
     • Auth middleware: ./src/middleware.ts
     • Tailwind forms: npm i -D @tailwindcss/forms
   • Mobile project
     • Starting the server
     • Connect with API (backend service)
     • Set routes layout: ./app/_layout.tsx
     • Customize app initial route: ./app/index.tsx
     • New memory page: ./app/new.tsx


5. Part 5 - The next level
   
   • Frontend project
     • Create new memory
       • MediaPicker: ./src/components/MediaPicker.tsx
     • Media Preview
       • New Memory Form = ./src/components/NewMemoryForm.tsx
       • JS-Cookie: npm i js-cookie
       • JS-Cookie for TS: npm i -D @types/js-cookie
     • List layout
     • Search memories from API
   • Mobile project
     • Pick an Image
       • Expo Image Picker: npx expo install expo-image-picker
       • Choose an image from gallery
       • Image preview
     • Create new memory: ./app/new.tsx
     • Logout button
     • List layout
     • Search memories from API
     • Testing all

🧪 How to use

1. Set the development environment at you local computer
2. Clone the repository
   • git clone https://github.com/alexandrecpedro/spacetime
3. Enter the project directory:
   • cd spacetime
4. Testing
   • Backend
     1. Enter the directory
        • cd backend
     2. Install the dependencies
        • npm install
     3. Run
        • npm run dev
   • Frontend
     1. Enter the directory
        • cd frontend
     2. Install the dependencies
        • npm install
     3. Run
        • npm run dev
   • Mobile
     1. Enter the directory
        • cd mobile
     2. Before run the mobile app, check if the following tools are already installed:
        • Node.js LTS release
          • https://nodejs.org/en/
        • Git
          • https://git-scm.com/downloads
        • Watchman (only for MacOS and Linux users)
          • https://facebook.github.io/watchman/docs/install#buildinstall
        • Expo CLI
          • npm install --global expo-cli
     3. Install the dependencies
        • npx install-expo-modules@latest
        • npm install expo
        • expo install
        • npm install
     4. Run
        • npx expo start