{"id":19153402,"url":"https://github.com/alexandrecpedro/spacetime","last_synced_at":"2025-09-09T02:32:29.696Z","repository":{"id":166554043,"uuid":"641593709","full_name":"alexandrecpedro/spacetime","owner":"alexandrecpedro","description":"Time Capsule platform for web and mobile - NLW Spacetime","archived":false,"fork":false,"pushed_at":"2023-05-20T00:31:17.000Z","size":3063,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-09T08:29:50.541Z","etag":null,"topics":["cors","expo","fastify","figma","google-fonts","ignite-rocketseat","lucide-icons","nextjs","nodejs","postcss","prisma","react","react-native","reactnavigation","rocketseat","sqlite3","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexandrecpedro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-16T19:55:26.000Z","updated_at":"2023-10-19T09:27:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"956d4864-529d-4b43-a0a1-3e327249a948","html_url":"https://github.com/alexandrecpedro/spacetime","commit_stats":null,"previous_names":["alexandrecpedro/spacetime"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandrecpedro%2Fspacetime","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandrecpedro%2Fspacetime/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandrecpedro%2Fspacetime/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandrecpedro%2Fspacetime/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexandrecpedro","download_url":"https://codeload.github.com/alexandrecpedro/spacetime/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232382172,"owners_count":18514740,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cors","expo","fastify","figma","google-fonts","ignite-rocketseat","lucide-icons","nextjs","nodejs","postcss","prisma","react","react-native","reactnavigation","rocketseat","sqlite3","tailwindcss","typescript"],"created_at":"2024-11-09T08:22:58.736Z","updated_at":"2025-01-03T19:16:46.357Z","avatar_url":"https://github.com/alexandrecpedro.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align = \"center\"\u003e\n  \u003ch1\u003e NLW Spacetime \u003c/h1\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n\u003cdiv align = 'center' justify-content = 'space-around' \u003e\n  \u003cimg width=\"1604\" alt=\"NLW Spacetime Time Capsule - Desktop\" src=\"./project/screens/screen1.png\"\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\u003cdiv align = 'center' justify-content = 'space-around' \u003e\n  \u003cimg width=\"1604\" alt=\"Time Capsule Memories - Desktop\" src=\"./project/screens/screen2.png\"\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\u003cdiv align = 'center' justify-content = 'space-around' \u003e\n  \u003cimg width=\"1604\" alt=\"Time Capsule Create Memory - Desktop\" src=\"./project/screens/screen3.png\"\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\u003cdiv align = 'center' justify-content = 'space-around' \u003e\n  \u003cimg width=\"1604\" alt=\"Time Capsule Create Memory (filled) - Desktop\" src=\"./project/screens/screen4.png\"\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n| | | | |\n| :---------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------: |\n|   \u003cimg width=\"1604\" alt=\"Splash Page - Mobile\" src=\"./project/screens/screen5.png\"\u003e    |   \u003cimg width=\"1604\" alt=\"Home Page - Mobile\" src=\"./project/screens/screen6.png\"\u003e   |   \u003cimg width=\"1604\" alt=\"Time Capsule Memories - Mobile\" src=\"./project/screens/screen7.png\"\u003e   |   \u003cimg width=\"1604\" alt=\"Time Capsule: create new memory - Mobile\" src=\"./project/screens/screen8.png\"\u003e   |\n\u003cbr\u003e\n\n\u003cp\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"#theproject\"\u003eThe Project\u003c/a\u003e •\n \u003ca href=\"#target\"\u003eTarget\u003c/a\u003e •\n \u003ca href=\"#technologies\"\u003eTechnologies\u003c/a\u003e •\n \u003ca href=\"#route\"\u003eRoute\u003c/a\u003e •\n \u003ca href=\"#howtouse\"\u003eHow to Use\u003c/a\u003e\n\u003c/p\u003e\n\u003cbr\u003e\n\n\u003cdiv id=\"theproject\"\u003e\n\u003ch2\u003e 📓 The Project \u003c/h2\u003e\n\u003cp\u003e 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) \u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv id=\"target\"\u003e\n\u003ch2\u003e 💡 Target \u003c/h2\u003e\nDevelopment 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\n\u003c/div\u003e\n\u003cbr\u003e\n\n\u003cdiv id=\"technologies\"\u003e\n\u003ch2\u003e 🛠 Technologies \u003c/h2\u003e\nThe following tools were used in building the project:\u003cbr\u003e\u003cbr\u003e\n\n|                       Type                       |           Tools           |            References             |\n| :----------------------------------------------: | :-----------------------: | :-------------------------------: |\n|                       IDE                        |          VS CODE          |  https://code.visualstudio.com/     |\n|              Design Interface Tool               | FIGMA (Prototype - UX/UI) |      https://www.figma.com/                  |\n|         Programming Language (Frontend)          |           REACT           |       https://reactjs.org/                  |\n|          Programming Language (Mobile)           |       REACT NATIVE        |     https://reactnative.dev/      |\n| Programming Language (Backend, Frontend, Mobile) |        TYPESCRIPT         |  https://www.typescriptlang.org/   |\n|          React web framework (Frontend)          |          NEXT.JS          |      https://nextjs.org/                  |\n|        API and backend services (Backend)        |          NODE.JS          |        https://nodejs.org/                  |\n|          NodeJS web framework (Backend)          |          FASTIFY          |      https://www.fastify.io/           |\n| Open source API development ecosystem (Testing)  |        HOPPSCOTCH         |      https://hoppscotch.io/        |\n|          Open source platform (Mobile)           |    EXPO BARE WORKFLOW     |         https://expo.dev/                  |\n|      Utility-first CSS Framework (Frontend)      |       TAILWIND CSS        |     https://tailwindcss.com/      |\n|    Tool for transforming CSS with JavaScript     |         POST CSS          |       https://postcss.org/                  |\n|      Graphic components (Frontend, Mobile)       |        LUCIDE-REACT       |    https://lucide.dev/                  |\n|    UI Utility-first Component Library (Mobile)   |        NATIVE BASE        |      https://nativebase.io/        |\n|        Navigation between pages (Mobile)         |     REACT NAVIGATION      |  https://reactnavigation.org/  |\n|                Database (Backend)                |          SQLITE           | https://www.sqlite.org/index.html            |\n|  Promise based HTTP client - browser \u0026 Node.js   |           AXIOS           |      https://axios-http.com/       |\n|  Node.js and TypeScript ORM (Backend, Database)  |          PRISMA           |      https://www.prisma.io/            |\n\u003cbr\u003e\n\n\u003cdiv align = 'center'\u003e\n  \u003ch3\u003eBackend | API\u003c/h3\u003e\n  \u003cimg height =' 100px ' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg\"/\u003e\n  \u003cimg height =' 100px ' left='80px' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg\" /\u003e\n  \u003cbr\u003e\n  \u003cimg height =' 100px ' left='80px' src=\"./project/logo/fastify_logo.png\" /\u003e\n  \u003cbr\u003e\n  \u003ch3\u003eTesting\u003c/h3\u003e\n  \u003cimg width =' 100px ' src=\"./project/logo/hoppscotch_logo.png\" /\u003e\n  \u003cbr\u003e\n  \u003ch3\u003eDatabase\u003c/h3\u003e\n  \u003cimg height =' 100px ' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/sqlite/sqlite-original.svg\" /\u003e\n  \u003cimg height =' 100px ' left='80px' src=\"./project/logo/prisma_logo.png\" /\u003e\n  \u003cbr\u003e\n  \u003ch3\u003eIDE\u003c/h3\u003e\n  \u003cimg height =' 100px ' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vscode/vscode-original.svg\" /\u003e\n  \u003cbr\u003e\n  \u003ch3\u003eUX/UI\u003c/h3\u003e\n  \u003cimg height =' 100px ' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/figma/figma-original.svg\" /\u003e\n  \u003cimg height =' 100px ' left='80px' src=\"./project/logo/lucide-react_logo.svg\"/\u003e\n  \u003cimg height =' 100px ' left='80px' src=\"./project/logo/nativebase_logo.svg\" /\u003e\n  \u003cbr\u003e\n  \u003ch3\u003eFrontend\u003c/h3\u003e\n  \u003cimg width =' 100px ' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg\" /\u003e\n  \u003cimg width =' 100px ' left='80px' right='100px' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg\" /\u003e\n  \u003cimg width =' 110px ' left='100px' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original-wordmark.svg\"/\u003e\n  \u003cbr\u003e\n  \u003cimg height =' 50px ' src=\"./project/logo/tailwind-css_logo.svg\" /\u003e\n  \u003cbr\u003e\n  \u003ch3\u003eMobile\u003c/h3\u003e\n  \u003cimg height =' 100px ' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg\" /\u003e\n  \u003cimg height =' 100px ' left='80px' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg\" /\u003e\n  \u003cimg height =' 100px ' left='80px' src=\"./project/logo/react_navigation.svg\" /\u003e\n  \u003cimg height =' 100px ' left='80px' src=\"./project/logo/expo.png\" /\u003e\n  \u003cbr\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\n\u003cdiv id=\"route\"\u003e\n\u003ch2\u003e 🔎 Route \u003c/h2\u003e\n  \u003col\u003e\n    \u003cli \u0026nbsp;\u003ePart 1 - Starting the project end-to-end\u003cbr/\u003e\n      \u003cul \u0026nbsp;\u003e\n        \u003cli \u0026nbsp;\u003eBuild the project prototype: https://www.figma.com/file/G8PUN4pJqzxEzxPNd7eP5z/C%C3%A1psula-do-tempo-%E2%80%A2-Trilha-Ignite-(Community)?type=design\u0026node-id=205-3\u0026t=7bhiHbk0QWYK3QZT-0\u003c/li\u003e\n        \u003cli\u003eInstall VS Code (IDE)\u003c/li\u003e\n        \u003cli\u003eInstall VS Code extensions: NodeJS, Prisma, Tailwind CSS IntelliSense, PostCSS Language Support, Symbols, Fluent Icons, GitLens, ESLint, DotENV\u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eBackend project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eCreate a new project: mkdir backend\u003c/li\u003e\n            \u003cli\u003eEnter backend project: cd backend\u003c/li\u003e\n            \u003cli\u003eInstall Node and start: npm init -y\u003c/li\u003e\n            \u003cli\u003eInstall Fastify framework: npm i fastify\u003c/li\u003e\n            \u003cli\u003eConfigure server and ports: ./src/server.ts\u003c/li\u003e\n            \u003cli\u003eInstall TypeScript for development environment:\n              \u003cul\u003e\n                \u003cli\u003enpm i typescript -D\u003c/li\u003e\n                \u003cli\u003enpx tsc --init (Settings file for TS)\u003c/li\u003e\n                \u003cli\u003enpm i tsx -D (Automatically updates)\u003c/li\u003e\n                \u003cli\u003eChange ts config file: ./tsconfig.json\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eConfigure the package.json: ./package.json \u003c/li\u003e\n            \u003cli\u003eRun the application: npm run dev\u003c/li\u003e\n            \u003cli\u003eDefine \"Use Cases\"\u003c/li\u003e\n            \u003cli\u003eSet routes: ./src/server.ts\u003c/li\u003e\n            \u003cli\u003eInstall plugins: npm i @rocketseat/eslint-config prettier-plugin-tailwindcss -D\u003c/li\u003e\n            \u003cli\u003eInstall and set Prisma\n              \u003cul\u003e\n                \u003cli\u003eInstall (for development): npm i prisma -D\u003c/li\u003e\n                \u003cli\u003eInstall Prisma Client: npm i @prisma/client\u003c/li\u003e\n                \u003cli\u003eSet Database SQLite: npx prisma init --datasource-provider SQLite\u003c/li\u003e\n                \u003cli\u003eCreate tables and entities: ./prisma/schema.prisma\u003c/li\u003e\n                \u003cli\u003eRun migrations: npx prisma migrate dev\n                  \u003cul\u003e\n                    \u003cli\u003eName for the new migration: create the rest of the tables\u003c/li\u003e\n                    \u003cli\u003eName for the new migration: create users table\u003c/li\u003e\n                    \u003cli\u003eName for the new migration: create relations\u003c/li\u003e\n                  \u003c/ul\u003e\n                \u003c/li\u003e\n                \u003cli\u003eTo see DB generated from Prisma: npx prisma studio\u003c/li\u003e\n                \u003cli\u003eGenerate: npx prisma generate\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eFrontend project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eCreate the frontend project (React, Next.js and TypeScript): npx create-next-app@latest frontend --use-npm\u003c/li\u003e\n            \u003cli\u003eBuild the project: npm run build\u003c/li\u003e\n            \u003cli\u003eInstall plugins: npm i @rocketseat/eslint-config prettier-plugin-tailwindcss -D\u003c/li\u003e\n            \u003cli\u003eUse prettier-eslint: ./prettier.config.js\u003c/li\u003e\n            \u003cli\u003eCustomize contents, themes, fonts and plugins with Tailwind: ./tailwind.config.js\u003c/li\u003e\n            \u003cli\u003eCustomize the main style: ./src/app/styles/global.css\u003c/li\u003e\n            \u003cli\u003eTo run project: npm run dev\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eMobile project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eInstall \"R Component\" extension at VS Code\u003c/li\u003e\n            \u003cli\u003eInstall Expo CLI: npm install --global expo-cli\u003c/li\u003e\n            \u003cli\u003eCreate a new project: npx create-expo-app mobile\u003c/li\u003e\n            \u003cli\u003eNavigate to project directory: cd mobile\u003c/li\u003e\n            \u003cli\u003eOpen the project on VS Code: code .\u003c/li\u003e\n            \u003cli\u003eChange App.js to App.tsx\u003c/li\u003e\n            \u003cli\u003eRun app and accept download TS libs: npm start\u003c/li\u003e\n            \u003cli\u003eInstall Nativewind: npm i nativewind\u003c/li\u003e\n            \u003cli\u003eSet TailwindCSS:\n              \u003cul\u003e\n                \u003cli\u003eInstall plugin: npm i tailwindcss -D\u003c/li\u003e\n                \u003cli\u003eInitialization: npx tailwindcss init\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eSet ESLint:\n              \u003cul\u003e\n                \u003cli\u003eInstall plugins: npm i @rocketseat/eslint-config eslint -D\u003c/li\u003e\n                \u003cli\u003eCreate and set file: ./.eslintrc.json\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eSet Prettier:\n              \u003cul\u003e\n                \u003cli\u003eInstall plugin: npm i prettier-plugin-tailwindcss -D\u003c/li\u003e\n                \u003cli\u003eCreate and set file: ./prettier.config.js\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eRun Expo Go: npx expo start\u003c/li\u003e\n            \u003cli\u003eInstall Native Base on project:\n              \u003cul\u003e\n                \u003cli\u003enpm install native-base\u003c/li\u003e\n                \u003cli\u003enpx expo install react-native-svg \u003c/li\u003e\n                \u003cli\u003enpx expo install react-native-safe-area-context\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eStart the development server: npx expo start\u003c/li\u003e\n            \u003cli\u003eConfigure the Expo Go on a mobile device or use an emulator\u003c/li\u003e\n            \u003cli\u003eOpen the app on a mobile device:\n              \u003cul\u003e\n                \u003cli\u003eOn your iPhone or iPad, open the default Apple \"Camera\" app and scan the QR code you see in the terminal\u003c/li\u003e\n                \u003cli\u003eOn 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.\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cbr\u003e\n    \u003cli \u0026nbsp;\u003ePart 2 - Advancing the backend and frontend\u003cbr/\u003e\n      \u003cul \u0026nbsp;\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eBackend project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eDefine \"Use Cases\"\u003c/li\u003e\n            \u003cli\u003eSet Prisma structure\n              \u003cul\u003e\n                \u003cli\u003eMigration\n                  \u003col\u003e\n                    \u003cli\u003eReset the previous migration: npx prisma migrate reset\u003c/li\u003e\n                    \u003cli\u003eRun migrations: npx prisma migrate dev\n                      \u003cul\u003e\n                        \u003cli\u003eName for the new migration: create the rest of the tables\u003c/li\u003e\n                        \u003cli\u003eName for the new migration: create memories table\u003c/li\u003e\n                        \u003cli\u003eName for the new migration: create relations\u003c/li\u003e\n                      \u003c/ul\u003e\n                    \u003c/li\u003e\n                  \u003c/ol\u003e\n                \u003c/li\u003e\n                \u003cli\u003eOpen Prisma Studio: npx prisma studio\u003c/li\u003e\n                \u003cli\u003eCreate Seed: ./prisma/seed.ts\u003c/li\u003e\n                \u003cli\u003eRun seed: npx prisma db seed\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli\u003eZod: npm i zod\u003c/li\u003e\n        \u003cli\u003eMemory CRUD: ./src/routes/memories.ts\n          \u003cul\u003e\n            \u003cli\u003eList\u003c/li\u003e\n            \u003cli\u003eCreate\u003c/li\u003e\n            \u003cli\u003eDetail\u003c/li\u003e\n            \u003cli\u003eUpdate\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli\u003eCors library (Protection for non-desirable access) \n          \u003cul\u003e\n            \u003cli\u003eInstall CORS: npm i @fastify/cors\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eFrontend project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eSet Google Fonts\n              \u003cul\u003e\n                \u003cli\u003eLayout: ./src/app/layout.tsx\u003c/li\u003e\n                \u003cli\u003eCSS: ./src/app/globals.css\u003c/li\u003e\n                \u003cli\u003eTailwind: ./tailwind.config.js\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eSet the Home Page: ./src/app/page.tsx\n              \u003cul\u003e\n                \u003cli\u003eBlur background and Stripes: ./tailwind.config.js\u003c/li\u003e\n                \u003cli\u003eConvert a svg file code to React component: https://svg2jsx.com/\u003c/li\u003e\n                \u003cli\u003eInstall Lucide-React icon plugin: npm i lucide-react\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eMobile project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eImages, theme and utils for the project: \n              \u003cul\u003e\n                \u003cli\u003eInstall images plugins:\n                  \u003col\u003e\n                    \u003cli\u003eReact Native Svg Library: expo install react-native-svg\u003c/li\u003e\n                    \u003cli\u003eReact-Native-SVG-Transformer: npm i react-native-svg-transformer -D\u003c/li\u003e\n                    \u003cli\u003eSet: ./tailwind.config.js\u003c/li\u003e\n                    \u003cli\u003eComunnicate to TS image types available: ./src/assets/assets.d.ts\u003c/li\u003e\n                  \u003c/ol\u003e\n                \u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eFonts\n              \u003cul\u003e\n                \u003cli\u003eInstall Google Fonts: npx expo install expo-font @expo-google-fonts/roboto @expo-google-fonts/bai-jamjuree\u003c/li\u003e\n                \u003cli\u003eSet: ./tailwind.config.js\u003c/li\u003e\n                \u003cli\u003eSet customized font: ./App.tsx\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eCreate the Splash Page\u003c/li\u003e\n            \u003cli\u003eUse React Hooks: useState, useEffect, ...\u003c/li\u003e\n            \u003cli\u003eCreate Home screen: ./App.tsx\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003cbr\u003e\n    \u003cli \u0026nbsp;\u003ePart 3 - Integrating UI with libraries\u003cbr/\u003e\n      \u003cul \u0026nbsp;\u003e \n        \u003cli \u0026nbsp;\u003e\u003cb\u003eBackend project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eEnvironment variables\n              \u003col\u003e\n                \u003cli\u003eInstall package: npm i dotenv -D\u003c/li\u003e\n                \u003cli\u003eGithub OAuth variables: ./.env\u003c/li\u003e\n                \u003cli\u003eImport dotenv/config at ./src/server.ts\u003c/li\u003e\n              \u003c/ol\u003e\n            \u003c/li\u003e\n            \u003cli\u003eAxios: npm i axios\u003c/li\u003e\n            \u003cli\u003eJWT: npm i @fastify/jwt\u003c/li\u003e\n            \u003cli\u003eRoutes:\n              \u003cul\u003e\n                \u003cli\u003eAuth route: ./src/routes/auth.ts\u003c/li\u003e\n                \u003cli\u003eAthenticated routes\n                  \u003cul\u003e\n                    \u003cli\u003eSet global type: ./src/auth.d.ts\u003c/li\u003e\n                    \u003cli\u003eSet auth require: ./src/routes/memoriesRoutes.ts\u003c/li\u003e\n                  \u003c/ul\u003e\n                \u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eFile upload\n              \u003cul\u003e\n                \u003cli\u003eFastify Multipart: npm i @fastify/multipart\u003c/li\u003e\n                \u003cli\u003eRoute: ./src/routes/upload.ts\u003c/li\u003e\n                \u003cli\u003eUpdate server file: ./src/server.ts\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eStatic files URL\n              \u003cul\u003e\n                \u003cli\u003eFastify Static: npm i @fastify/static\u003c/li\u003e\n                \u003cli\u003eSet: ./src/server.ts\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eFrontend project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eAuthentication:\n              \u003col\u003e\n                \u003cli\u003eAuth flow\n                  \u003cdiv align=\"center\"\u003e\n                    \u003cimg width=\"900\" alt=\"Github OAuth Flow\" src=\"./project/screens/GithubAuthFlow.png\"\u003e\n                  \u003c/div\u003e\n                \u003c/li\u003e\n                \u003cli\u003eGithub OAuth settings\n                  \u003col\u003e\n                    \u003cli\u003eCreate an application at http://github.com/settings/developers\u003c/li\u003e\n                    \u003cli\u003eSet environment variables at: ./.env.local\u003c/li\u003e\n                  \u003c/ol\u003e\n                \u003c/li\u003e\n                \u003cli\u003eGetting Gihub code web\u003c/li\u003e\n              \u003c/ol\u003e\n            \u003c/li\u003e\n            \u003cli\u003eSet components\n              \u003col\u003e\n                \u003cli\u003eCopyright: ./src/components/Copyright.tsx\u003c/li\u003e\n                \u003cli\u003eEmpty memory list: ./src/components/EmptyMemories.tsx\u003c/li\u003e\n                \u003cli\u003eHero section: ./src/components/Hero.tsx\u003c/li\u003e\n                \u003cli\u003eSignIn: ./src/components/SignIn.tsx\u003c/li\u003e\n              \u003c/ol\u003e\n            \u003c/li\u003e\n            \u003cli\u003eAxios: npm i axios\u003c/li\u003e\n            \u003cli\u003eSaving token at cookies\n              \u003col\u003e\n                \u003cli\u003eJWT lib: npm i jwt-decode\u003c/li\u003e\n                \u003cli\u003eSet auth lib: ./src/lib/auth.ts\u003c/li\u003e\n              \u003c/ol\u003e\n            \u003c/li\u003e\n            \u003cli\u003eUser profile\n              \u003col\u003e\n                \u003cli\u003eNext Config: ./next.config.js\u003c/li\u003e\n                \u003cli\u003eComponent: ./src/components/Profile.tsx\u003c/li\u003e\n                \u003cli\u003eSet profile on home: ./src/app/page.tsx\u003c/li\u003e\n              \u003c/ol\u003e\n            \u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eMobile project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eInstall Expo-Auth-Session / Expo Crypto: npx expo install expo-auth-session expo-crypto\u003c/li\u003e\n            \u003cli\u003eSet Github OAuth (Expo)\u003c/li\u003e\n            \u003cli\u003eGet Github code mobile: ./App.tsx\u003c/li\u003e\n            \u003cli\u003eSave token at secure store\n              \u003col\u003e\n                \u003cli\u003eAxios: npm i axios\u003c/li\u003e\n                \u003cli\u003eExpo Secure Store: npx expo install expo-secure-store\u003c/li\u003e\n                \u003cli\u003eImplementing: ./App.tsx\u003c/li\u003e\n              \u003c/ol\u003e\n            \u003c/li\u003e\n            \u003cli\u003eUser navigation\n              \u003cul\u003e\n                \u003cli\u003eInstall React Navigation / Expo Router on project:\n                  \u003cul\u003e\n                    \u003cli\u003enpx expo install expo-router\u003c/li\u003e\n                    \u003cli\u003enpx expo install expo-linking\u003c/li\u003e\n                    \u003cli\u003enpx expo install expo-constants\u003c/li\u003e\n                    \u003cli\u003enpx expo install expo-status-bar\u003c/li\u003e\n                    \u003cli\u003enpx expo install react-native-screens\u003c/li\u003e\n                    \u003cli\u003enpx expo install react-native-safe-area-context\u003c/li\u003e\n                  \u003c/ul\u003e\n                \u003c/li\u003e\n                \u003cli\u003eCreate and set App file: ./app/index.tsx\u003c/li\u003e\n                \u003cli\u003eUse Expo Router\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eTesting\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eTest backend at Hoppscotch: https://hoppscotch.io/\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cbr\u003e\n    \u003cli \u0026nbsp;\u003ePart 4 - Integrating web and mobile projects\u003cbr/\u003e\n      \u003cul \u0026nbsp;\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eFrontend project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eRoutes\n              \u003cul\u003e\n                \u003cli\u003eSet route layout: ./src/app/layout.tsx\u003c/li\u003e\n                \u003cli\u003eLogout route: ./src/app/api/auth/logout/route.ts\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eNew memory page: ./src/app/memories/new/page.tsx\u003c/li\u003e\n            \u003cli\u003eAuth middleware: ./src/middleware.ts\u003c/li\u003e\n            \u003cli\u003eTailwind forms: npm i -D @tailwindcss/forms\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eMobile project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eStarting the server\u003c/li\u003e\n            \u003cli\u003eConnect with API (backend service)\u003c/li\u003e\n            \u003cli\u003eSet routes layout: ./app/_layout.tsx\u003c/li\u003e\n            \u003cli\u003eCustomize app initial route: ./app/index.tsx\u003c/li\u003e\n            \u003cli\u003eNew memory page: ./app/new.tsx\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e \n    \u003c/li\u003e \n    \u003cbr\u003e\n    \u003cli \u0026nbsp;\u003ePart 5 - The next level\u003cbr/\u003e\n      \u003cul \u0026nbsp;\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eFrontend project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eCreate new memory\n              \u003cul\u003e\n                \u003cli\u003eMediaPicker: ./src/components/MediaPicker.tsx\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eMedia Preview\n              \u003cul\u003e\n                \u003cli\u003eNew Memory Form = ./src/components/NewMemoryForm.tsx\u003c/li\u003e\n                \u003cli\u003eJS-Cookie: npm i js-cookie\u003c/li\u003e\n                \u003cli\u003eJS-Cookie for TS: npm i -D @types/js-cookie\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eList layout\u003c/li\u003e\n            \u003cli\u003eSearch memories from API\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eMobile project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003ePick an Image\n              \u003cul\u003e\n                \u003cli\u003eExpo Image Picker: npx expo install expo-image-picker\u003c/li\u003e\n                \u003cli\u003eChoose an image from gallery\u003c/li\u003e\n                \u003cli\u003eImage preview\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eCreate new memory: ./app/new.tsx\u003c/li\u003e\n            \u003cli\u003eLogout button\u003c/li\u003e\n            \u003cli\u003eList layout\u003c/li\u003e\n            \u003cli\u003eSearch memories from API\u003c/li\u003e\n            \u003cli\u003eTesting all\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e \n    \u003c/li\u003e\n    \u003cbr\u003e\n  \u003c/ol\u003e\n\u003c/div\u003e\n\n\u003cdiv id=\"howtouse\"\u003e\n\u003ch2\u003e🧪 How to use\u003c/h2\u003e\n  \u003col \u0026nbsp;\u003e\n    \u003cli \u0026nbsp;\u003eSet the development environment at you local computer\u003c/li\u003e\n    \u003cli \u0026nbsp;\u003eClone the repository\n      \u003cul\u003e\n        \u003cli\u003egit clone https://github.com/alexandrecpedro/spacetime\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli \u0026nbsp;\u003eEnter the project directory:\n      \u003cul\u003e\n        \u003cli\u003ecd spacetime\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003cb\u003eTesting\u003c/b\u003e\n      \u003cul\u003e\n        \u003cli \u0026nbsp;\u003e\u003cu\u003eBackend\u003c/u\u003e\n          \u003col\u003e\n            \u003cli \u0026nbsp;\u003eEnter the directory\n              \u003cul\u003e\n                \u003cli\u003ecd backend\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli \u0026nbsp;\u003eInstall the dependencies\n              \u003cul\u003e\n                \u003cli\u003enpm install\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli \u0026nbsp;\u003eRun\n              \u003cul\u003e\n                \u003cli\u003enpm run dev\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n          \u003c/ol\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cu\u003eFrontend\u003c/u\u003e\n          \u003col\u003e\n            \u003cli \u0026nbsp;\u003eEnter the directory\n              \u003cul\u003e\n                \u003cli\u003ecd frontend\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli \u0026nbsp;\u003eInstall the dependencies\n              \u003cul\u003e\n                \u003cli\u003enpm install\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli \u0026nbsp;\u003eRun\n              \u003cul\u003e\n                \u003cli\u003enpm run dev\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n          \u003c/ol\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cu\u003eMobile\u003c/u\u003e\n          \u003col\u003e\n            \u003cli \u0026nbsp;\u003eEnter the directory\n              \u003cul\u003e\n                \u003cli\u003ecd mobile\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli \u0026nbsp;\u003eBefore run the mobile app, check if the following tools are already installed:\n              \u003cul\u003e\n                \u003cli \u0026nbsp;\u003e\u003cu\u003eNode.js LTS release\u003c/u\u003e\n                  \u003cul\u003e\n                    \u003cli\u003ehttps://nodejs.org/en/\u003c/li\u003e\n                  \u003c/ul\u003e\n                \u003c/li\u003e\n                \u003cli \u0026nbsp;\u003e\u003cu\u003eGit\u003c/u\u003e\n                  \u003cul\u003e\n                    \u003cli\u003ehttps://git-scm.com/downloads\u003c/li\u003e\n                  \u003c/ul\u003e\n                \u003c/li\u003e\n                \u003cli \u0026nbsp;\u003e\u003cu\u003eWatchman (only for MacOS and Linux users)\u003c/u\u003e\n                  \u003cul\u003e\n                    \u003cli\u003ehttps://facebook.github.io/watchman/docs/install#buildinstall\u003c/li\u003e\n                  \u003c/ul\u003e\n                \u003c/li\u003e\n                \u003cli \u0026nbsp;\u003e\u003cu\u003eExpo CLI\u003c/u\u003e\n                  \u003cul\u003e\n                    \u003cli\u003enpm install --global expo-cli\u003c/li\u003e\n                  \u003c/ul\u003e\n                \u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli \u0026nbsp;\u003eInstall the dependencies\n              \u003cul\u003e\n                \u003cli\u003enpx install-expo-modules@latest\u003c/li\u003e\n                \u003cli \u0026nbsp;\u003enpm install expo\u003c/li\u003e\n                \u003cli \u0026nbsp;\u003eexpo install\u003c/li\u003e\n                \u003cli \u0026nbsp;\u003enpm install\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli \u0026nbsp;\u003eRun\n              \u003cul\u003e\n                \u003cli\u003enpx expo start\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n          \u003c/ol\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/div\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandrecpedro%2Fspacetime","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexandrecpedro%2Fspacetime","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandrecpedro%2Fspacetime/lists"}