TinkerBread Projects

Created by neennera and Brnn043

TinkerBread Projects

A 10 days project for decorating friends’ gingerbreads in 3D and sending the messages. Send love through Christmas. Using Next.js, React Three Fiber, and PostgreSQL.

See the 2-minutes playthrough video : here

This website launched on 25 December 2024. There were 43 new users in the first 2 days. We still run the website on Vercel until this day.

You can visit the website here : here

TinkerBread Web Flow

First, users need to login with their google account.

If they do not register on our website yet, it will lead to a signup page. Where user can choose their gingerbread model and set up their “thanks message”

After the login process, users can go to their /bake/me to see their TinkerBreads kitchen. When I show a friend’s item and message they decorate the user’s gingerbreads.

• Users can go to settings to change their name and thanks message.
• Users can click “bake more” to get a new gingerbreads baking tray if three last gingerbreads are fully decorated.

When users visit a friend’s gingerbread by typing friend’s id. If they have not yet decorated this friend’s gingerbreads, the user can choose the decorated model and write a sweet message to them. Each two users can only send the decoration once.

Frontend Development

Tools

1. Next.js — For building a fast and scalable web application.
2. React-Three-Fiber & Three.js — For rendering and managing 3D scenes and models.
3. Blender — For creating and designing 3D gingerbread models.
4. Tailwind CSS — For styling and creating responsive layouts.
5. React — For managing user interactions and dynamic content.

Next.js

The Tinkerbread project requires a high-performance and scalable web application to ensure users have a smooth and responsive experience.

To achieve this, we chose Next.js as our solution. Its features, such as server-side rendering (SSR) and static site generation (SSG), allow for fast page load times and efficient navigation between different sections of the application. This ensures that users can easily decorate gingerbreads, view updates in real-time, and share personalized links with friends without delays.

Three.js & React three fiber

To create the interactive 3D visuals, we chose React-Three-Fiber and Three.js as our solutions.

React-Three-Fiber provides a React-friendly way to manage 3D scenes, integrating smoothly into the rest of the application’s components. It simplifies handling user interactions and decorations while maintaining a unified development workflow.

Three.js handles the rendering of the 3D models, ensuring that the visuals are high-quality and responsive.

This combination allows us to deliver stunning, realistic gingerbread models with smooth animations and precise interactions for user customization.

Blender

For designing the gingerbread models, we chose Blender as our 3D modeling tool. Blender enables us to create detailed and modular gingerbread assets that can be decorated dynamically by users. The tool’s robust design capabilities allow for intricate model creation while maintaining optimal performance for integration with web-based technologies.

These Blender assets are seamlessly imported into React-Three-Fiber, forming the heart of the Tinkerbread decorating experience.

Backend Development

Tools

Our backend leverages the PostgreSQL database with Prisma as the ORM (Object-Relational Mapping) library. This combination ensures efficient data modeling and querying capabilities.

Database Schema

We use a relational database schema with four primary tables:

1. User Table

• id: Unique identifier for each user.
• email: User’s email address.
• gingerbreadsId: A foreign key linking to the Gingerbreads table.

2. Gingerbreads Table

• id: Unique identifier for each gingerbread collection.
• thanksMessage: A custom thank-you message text.
• gingerbreadModel: Stores the gingerbread model representation.
• gingerbreadIds: Links to up to three Gingerbread records.

3. Gingerbread Table

• id: Unique identifier for each gingerbread.
• itemDataId: Links to an ItemData record representing specific parts of a gingerbread (e.g., head, left hand, right hand).

4. ItemData Table

• id: Unique identifier for each item.
• itemName: Name of the item (e.g., “Red Hat”, “Blue Gloves”).
• senderName: Name of the sender.
• message: Custom message attached to the item.

Authentication

We integrate Google authentication using the NextAuth library for seamless and secure login.

Session Data:

• Stores the user’s username and userId.
• Authentication is managed using Google as the provider.
• To avoid duplicate user entries, we validate the user’s email during the signup process.

API Management

All API endpoints are written within the Next.js framework.

Responsibilities include: Creating and managing user data, Handling CRUD operations for gingerbread-related data, Enforcing validation and error handling for API requests.

An example API endpoint like. GET /gingerbreads/:GGBsId/:userId to get user’s gingerbread , PATCH /gingerbread/:GGBsId to decorate friend’s gingerbread.

The important endpoint like decorate gingerbread api , change name api will check the user’s session first. If the session has invalid userId it will reject the query.

Middleware

Middleware is implemented to enforce user authentication. Checks if a user is logged in before granting access to certain routes.

Protected Routes:

• /bake/me: Allows users to view or customize their own gingerbread.
• /bake/:userId: Restricts access to another user’s baking page unless authenticated.

TinkerBread Compainge

This website launched the campainge on 25 December 2024–7 January 2025. It had ‘add-yours’ IG story and receive a warming message from 43 users in the first 2 days.