We are all drown to stories, and historical ones are the most appealing. But history is not accessable easily to people and a tourist guide is needed at any historical site. Our ancestors left us a lot of stories to consume, and likewise, we can leave our own onsite. Both our ancestor's history and our attendance on a geographical spot is a trace that shall never vanishes, and this app tries to make this a reality.

This application will allow you to discover historical sites by finding close chests in the area you are located or visit. It will also allow you to leave traces behind. Those traces could be text, music, images, or videos. People who pass by the geographical location of the left trace will be able to check what you have left behind.

• As a user, I want to learn about history, so that I recognize valuable historical sites
• As a user, I want to share text at the location I visit, so that other visitors can check
• As a user, I want to share images at the location I visit, so that other visitors can check
• As a user, I want to share music at the location I visit, so that other visitors can check
• As a user, I want to share videos at the location I visit, so that other visitors can check

This design was planned before on paper, then moved to Figma app for the fine details. Note that i didn't use any styling library or theme, all from scratch and using pure css modules

First I start with the Landing screens

Log in Page	Sign In	Dob Page	Sign Up

Here you can find the Middle Button Menu screens

Middle Button	Saved	My Traces	Friends

Scripts	Items

Here you can find the main screens

Profile	Chest	Image Trace	Video Trace

Main Frame Demo	Music Trace	Add Trace	Splash Screen

Here's a brief high-level overview of the tech stack the Trace app uses, as it is seperated into two main parts:

• In the first part of this project, I used the React Native with the Expo framework For the user interface. React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use the React framework along with native platform capabilities.
• The database used was MySQL. I used Node js with express for the backend.
• The second part of this project was done using Unity 3d. Unity is a cross-platform game engine developed by Unity Technologies. The main frame that was mentioned in the demo above was done using Unity, in a different way than shown.
• Currently the project is still seperated, and each part is still standalone. Linking between the two frameworks is the next step.

Uing the above mentioned tech stacks and the wireframes build with figma from the user sotries we have, the implementation of the app is shown as below, these are screenshots from the real app

Sign Up New Account	Log In New Account	Log Out

Logging In Current Account	Show Profile	Show Middle Button

Update Profile	Remove Image	Add Trace

Here you can see the app in development mode with a previously defined path. The application is a location based game using mapbox api for maps.

App in development Demo

Here you can see the app on an andriod device.

App on andriod

Install npm package

• npm

  npm install npm@latest -g

1. Clone the repo

   git clone https://github.com/HousamKak/trace.git

2. navigate to trace folder and install NPM packages

   npm install
   npm install dotenv mysql2 bcrypt jsonwebtoken

3. Install expo go application

4. Navigate to frontend folder and run

   npm start

   Then scan the QR code

You can find the android unity app here. Location tracking in the application is working.

Note that React Native app works on both android and ios devices

• Linking between the two frameworks is needed. The app might move from react native expo to the normal react native because it makes it easier to link with unity
• Adding the video and the music traces
• Add seeding to the repository for local trial