Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alexandrecpedro/spacetime
Time Capsule platform for web and mobile - NLW Spacetime
https://github.com/alexandrecpedro/spacetime
cors expo fastify figma google-fonts ignite-rocketseat lucide-icons nextjs nodejs postcss prisma react react-native reactnavigation rocketseat sqlite3 tailwindcss typescript
Last synced: 21 days ago
JSON representation
Time Capsule platform for web and mobile - NLW Spacetime
- Host: GitHub
- URL: https://github.com/alexandrecpedro/spacetime
- Owner: alexandrecpedro
- Created: 2023-05-16T19:55:26.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-05-20T00:31:17.000Z (over 1 year ago)
- Last Synced: 2024-11-09T08:29:50.541Z (3 months ago)
- Topics: cors, expo, fastify, figma, google-fonts, ignite-rocketseat, lucide-icons, nextjs, nodejs, postcss, prisma, react, react-native, reactnavigation, rocketseat, sqlite3, tailwindcss, typescript
- Language: TypeScript
- Homepage:
- Size: 2.92 MB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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
- 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.
- Part 2 - Advancing the backend and frontend
-
Backend project
- Define "Use Cases"
- Set Prisma structure
- Migration
- Reset the previous migration: npx prisma migrate reset
- 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:
- React Native Svg Library: expo install react-native-svg
- React-Native-SVG-Transformer: npm i react-native-svg-transformer -D
- Set: ./tailwind.config.js
- 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
- Part 3 - Integrating UI with libraries
-
Backend project
- Environment variables
- Install package: npm i dotenv -D
- Github OAuth variables: ./.env
- 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:
- Auth flow
- Github OAuth settings
- Create an application at http://github.com/settings/developers
- Set environment variables at: ./.env.local
- Getting Gihub code web
- Set components
- Copyright: ./src/components/Copyright.tsx
- Empty memory list: ./src/components/EmptyMemories.tsx
- Hero section: ./src/components/Hero.tsx
- SignIn: ./src/components/SignIn.tsx
- Axios: npm i axios
- Saving token at cookies
- JWT lib: npm i jwt-decode
- Set auth lib: ./src/lib/auth.ts
- User profile
- Next Config: ./next.config.js
- Component: ./src/components/Profile.tsx
- 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
- Axios: npm i axios
- Expo Secure Store: npx expo install expo-secure-store
- 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/
- 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
- 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
- Set the development environment at you local computer
- Clone the repository
- git clone https://github.com/alexandrecpedro/spacetime
- Enter the project directory:
- cd spacetime
-
Testing
- Backend
- Enter the directory
- cd backend
- Install the dependencies
- npm install
- Run
- npm run dev
- Frontend
- Enter the directory
- cd frontend
- Install the dependencies
- npm install
- Run
- npm run dev
- Mobile
- Enter the directory
- cd mobile
- 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
- Install the dependencies
- npx install-expo-modules@latest
- npm install expo
- expo install
- npm install
- Run
- npx expo start