A unique chest opening platform

View Site · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. License
6. Contact
7. Acknowledgments

About The Project

For a detailed view of the design, visit the Figma project.

This project introduces a unique web-based 3D chest-opening experience, designed to captivate users with interactive visualizations and dynamic content. It stands out by providing a seamless and engaging exploration of virtual treasures, continuously evolving through updates in content management.

Key Highlights:

• 3D Visualization: Engage users with captivating 3D graphics powered by Three.js.
• Dynamic Content: Easily updateable content via Sanity.io, keeping the experience fresh.
• Efficient Development: Built with TypeScript and optimized with Vite and Bun.js for a seamless development process.

Built With

The development of this project is supported by a selection of modern technologies chosen for their performance, efficiency, and capability to enhance the 3D web experience:

• - Ensures code reliability and developer productivity through strong typing.

• - Offers fast build times and hot module replacement for efficient development.

• - Powers the 3D graphics, bringing the virtual chest-opening sequences to life.

• - Delivers exceptional runtime performance, optimizing the web experience.

• - Provides a scalable CMS for dynamic and flexible content updates.

Focused on the fusion of technology and creativity, this project demonstrates what's possible when innovative web development practices are applied to interactive 3D experiences.

(back to top)

Getting Started

To set up this project locally and explore the immersive 3D chest-opening experience, follow these steps.

Prerequisites

Ensure you have either Node.js or Bun installed on your system to manage project dependencies and run the development server.

• For Node.js, download and install it from nodejs.org.
• For Bun, you can install it by running the following in your terminal (visit bun.sh for more details):

curl https://bun.sh/install | bash

Installation

1. Clone the repository to get a local copy of the project:

git clone https://github.com/vinnyhoward/loot-chest.git
cd loot-chest

2. Install dependencies using either npm (Node.js) or Bun. Choose the command based on your preference:

Using npm:

npm install

Using Bun:

bun install

3. Configure environment variables by creating a .env file in the root directory of the project. Fill it with your specific values based on the provided .env template:

PORT=3000
VITE_API_URL=<your_api_url>

VITE_SANITY_PROJECT_ID=<your_sanity_project_id>
VITE_SANITY_DATASET=<your_sanity_dataset>

Set up your environment variables: Rename the .env.example file to .env and update it with your specifics.

• PORT: The port your local server will run on (e.g., 3000).

• VITE_API_URL: Your backend API URL. Replace <your_api_url> with the actual API URL.

• VITE_SANITY_PROJECT_ID and VITE_SANITY_DATASET: Replace <your_sanity_project_id> and <your_sanity_dataset> with your Sanity project ID and dataset name. These are necessary for connecting to Sanity.io.

Visit the backend repository for instructions on setting up your <your_api_url>.

Visit the cms repository for instructions on setting up your Sanity environment started.

4. Run the development server to start the project locally. Use the corresponding command for your chosen package manager:

Using npm:

npm run dev

Using Bun:

bun run dev

Access the application by navigating to http://localhost:5173/ in your web browser (or another port if you specified a different one in your .env file).

Now, you're ready to dive into the project and start exploring the 3D chest-opening experience!

(back to top)

Usage

This platform is designed to deliver a captivating and interactive experience through several core features:

Authentication

Sign Up & Log In: Securely create and access your account to start your adventure. Password Reset: Easily recover access in case you forget your password, ensuring you're never locked out of the action.

Key Opening Experience

Daily Keys: Receive a key daily when you sign up or log in, unlocking the opportunity to open a chest. Choose Your Chest: Use your key to open any chest you choose, each containing unique rewards waiting to be discovered.

Leader boards

Compete and Compare: View the leaderboard to see how your rewards stack up against the community, fostering a competitive yet friendly environment. Track Your Achievements: Access your history of opened chests and rewards, celebrating your progress and strategizing for future openings. Whether you're here to compete, collect, or simply explore, these features are designed to ensure a rich, engaging experience for every user. Dive into the adventure and see what treasures await!

(back to top)

Roadmap

• Add onboarding modal
• Roulette chest opening experience
• Forgot Password/Reset Password needs a expired token flow
• Welcome to Loot Chest email

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Vincent Howard - @NiftyDeveloper - vincenguyenhoward@gmail.com

Project Link: https://github.com/vinnyhoward/loot-chest

(back to top)

Acknowledgments

This project wouldn't be as rich and immersive without the incredible assets created by the talented team over at Spacestation Animation

(back to top)