is an immersive web game that challenges players to identify locations within Tokyo using visual clues from carefully curated images.
- Responsive Design: The application is designed with Mobile first in mind.
- Interactive Maps: Leveraging MapLibre GL, the application offers interactive map functionality, allowing users to explore and interact with geographical data.
- Accessibility: The user interface components are built with accessibility in mind, following best practices and guidelines for inclusive design.
- Next.js - React framework for server-rendered and static applications
- React - JavaScript library for building user interfaces
- Tailwind CSS - Utility-first CSS framework
- Shad/CN - Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable.
- Firebase - Google's cloud-based platform for building web and mobile applications
- MapLibre GL - Open-source map rendering library
- Jest - JavaScript testing framework
- Architectural Highlights: The application follows a microservices architecture, with the frontend and backend components deployed and scaled independently. The frontend is deployed on Vercel, a cloud platform for static sites and Serverless Functions, while the backend is deployed on Heroku, a cloud platform for hosting and running applications. This architectural approach promotes scalability, flexibility, and separation of concerns, allowing each component to evolve and be maintained independently.
- Server-side Rendering (SSR): Next.js is used to provide server-side rendering, improving initial load times and enhancing the overall performance of the application.
- Component-based Architecture: The application follows a component-based architecture, promoting code reusability and modular development.
- State Management: The application utilizes React's built-in state management.
- Testing: The codebase includes unit tests and integration tests, ensuring code quality and facilitating easier maintenance and refactoring.
- Modular Architecture: The codebase is structured using a modular approach, promoting code reusability, maintainability, and scalability.
- [Node.js] (https://nodejs.org/en)
- [Firebase] (https://firebase.google.com/): Account for their Authentication and Picture Storage
- [Protomaps] (https://protomaps.com/dashboard): API Key
- Fork the repository on GitHub.
- Clone your forked repository:
- Navigate to the project directory:
- Install dependencies:
npm install
-
Install Firebase with npm install -g firebase-tools. To check your current version of Firebase, run the command firebase --version.
-
The installation is done globally, so if you encounter an firebase: command not found error, be sure to update your PATH variable on your machine's environmental variables or run npm exec -- firebase [CLI args].
-
Log into Firebase with firebase login using the account that has the Firebase project. 3.1 Initialize Firebase with firebase init, and set up the Authentication emulator. 3.2 If a .firebaserc file already exists, run the command firebase init emulators instead.
-
Set your firebaseConfig object variables in .env. These values can be found in the Google Firebase Console: Project Settings → Your app → SDK setup and configuration.
-
Run the command firebase emulators:start.
To start the development server, run:
npm run dev
The application will be available at https://localhost:3000.
Go to .env.local.example folder and replace the placeholders with your keys
To build the application for production, run:
npm run build
After the build is complete, you can start the production server with:
npm start
To lint the codebase, run:
npx next lint
To run the test suite, execute:
npm test
For watching changes and re-running tests, use:
npm run test:watch
For E2E Testing
Start the backend and Frontend:
npm run dev
Start E2E testing:
npx cypress open
- Fork the project repository on GitHub.
- Create a new branch for your feature or bug fix:
git checkout -b my-new-feature - Make changes and commit them:
git commit -am 'Add some feature' - Push your branch to your forked repository:
git push origin my-new-feature - Create a new Pull Request on the original repository.
This project is licensed under the MIT License.
Thank you to:
[Chad] (https://github.com/orgs/CC34-Senior-Project/people/chadgrover) for helping us in by giving advice on what to prioritize. [Tomas] Video that helped us set up the sctrict type script rules: https://www.youtube.com/watch?v=Y2OpsF_dkrQ&t=274s
[Ter] (https://github.com/departurelv) [Jarrod] (https://github.com/J-Ariola) [Dominik] (https://github.com/dominiksakic) [Ning] (https://github.com/NChang55) [Deana] (https://github.com/deanachou) [Jacob] (https://github.com/Flumanuck)