DEV Community: Anshul Negi

Project Codebreaker: Save the Fleet

Anshul Negi — Sat, 20 Jun 2026 20:03:15 +0000

This is a submission for the June Solstice Game Jam

What I Built

Break The Code

Inspired by the idea of codebreakers like Alan Turing during World War II, you play as an intelligence officer whose job is to intercept enemy messages, solve puzzles, and crack secret codes to uncover the enemy's plans.

Your Mission

Intercept enemy transmissions.
Solve decryption puzzles.
Uncover the enemy fleet's plans.
Stop their next move before it's too late.

As the war progresses, the puzzles become more challenging, testing your observation and logical thinking.

The Goal
Use your mind instead of weapons to prevent war and save lives. By breaking the enemy's codes before it's too late, you can change the outcome of the battle.

Live Url

break-the-code-sage.vercel.app

Video Demo

Code

anshulnegitc / break-the-code

Solve decryption puzzles, uncover enemy plans, and prevent war in this tactical codebreaking game inspired by Alan Turing.

Break The Code

"Break their code. Save the fleet."

Break The Code is a fast-paced, naval intelligence-themed puzzle game where players must intercept and decrypt enemy signals to protect the fleet before time runs out.

🚀 Key Features

Naval Intelligence Command Experience: Immerse yourself in a high-stakes mission environment.
Decryption Puzzles: Engaging, logic-based puzzles representing intercepted enemy transmissions.
Dynamic Game Engine: Built with HTML5 Canvas, featuring a fleet visualization engine.
Intense Gameplay: Manage your fleet's integrity while racing against the clock.
Responsive Design: Optimized for both desktop and mobile devices, ensuring critical data is always visible.

🛠️ Tech Stack

Framework: Angular (v21+) with Signals for reactive state management.
Language: TypeScript (Strict Mode).
Visuals & Styling: Tailwind CSS 4+ for a clean, technical, high-contrast UI.
Graphics: HTML5 Canvas API for real-time game engine rendering.

🏗️ Project Architecture

The project follows a feature-driven, scalable directory structure:

/src/app/canvas/: Contains the game engine…

View on GitHub

How I Built It

Technical Approach

Built the game using HTML5 Canvas for the battlefield and game visuals.
Used Google AI Studio throughout the development process to build and improve the game.
Used Gemini to help with gameplay ideas, mission flow, puzzle design, and balancing the difficulty.
Designed the game around 5 missions, where each completed mission advances the enemy fleet and unlocks the next challenge.
Added a 3-life system so every choice matters.
Created different puzzle types using number and pattern sequences, including arithmetic patterns, prime numbers, Fibonacci sequences, and multi-step logic.

Interesting Decisions

Instead of focusing on combat, I wanted players to stop the enemy by solving puzzles and breaking secret codes.
I moved the enemy fleet in five strategic steps instead of continuous movement to make the growing threat easier to understand.
I kept the interface simple and used short intelligence messages to tell the story without interrupting gameplay.

The goal was to create a simple experience where players use logic, observation, and problem-solving to uncover enemy plans and prevent war.

Prize Category

Best Ode to Alan Turing

Inspired by Alan Turing and World War II codebreakers.
Players use logic and code-breaking instead of weapons to stop the enemy.
The game celebrates the power of problem-solving and intelligence.

Best Google AI Usage

Used Google AI Studio and Gemini throughout development.
Gemini helped shape the gameplay, puzzles, mission flow, and overall experience.
Google AI acted as a creative partner from idea to final submission.

I Built an AI-First Portfolio Powered by Gemini

Anshul Negi — Fri, 30 Jan 2026 20:05:13 +0000

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

I like building things that are simple, useful, and easy to understand.
This portfolio replaces traditional navigation with conversation, letting you explore my work and approach through an AI-powered interface.

Portfolio

Try it here → Live Demo

How I Built It

Tech stack

Angular
TailWind CSS
Gemini Flash Lite 2.5

Design Decisions

Chose a conversational portfolio instead of a multi-page layout to highlight AI-driven interaction.
Kept the UI simple and readable so users can focus on content without distractions.
Added predefined prompts to help users get started easily.

Development Process

Gathered all portfolio information and structured it as a single data source to enable context-based responses.
Initially passed the entire portfolio data with each request, which led to unnecessary API usage and performance issues.
Introduced AI-based intent detection to understand what the user is asking before selecting relevant data. This helped reduce context size but still required further optimization.
Split the portfolio data into multiple focused sections (skills, projects, experience, philosophy) to improve clarity and reduce payload size.
Switched to Gemini Flash Lite 2.5 for faster, more efficient intent detection and lightweight response generation.
Defined fixed intents for predefined prompt pills to avoid unnecessary intent detection calls.
Cached responses for prompts to minimize repeated API calls and improve responsiveness.
Added a contextual follow-up question after responses to encourage deeper exploration without overwhelming the user.

Google AI tools

Google AI Studio
Gemini

What I'm Most Proud Of

Used AI to rapidly build, iterate, and deploy the application, enabling fast experimentation and continuous refinement.
Applied intent-based AI usage with focused context and model selection to improve response quality while reducing unnecessary API calls.
Balanced user experience and technical implementation, ensuring the interface remains simple while the system stays efficient.

Free Image Hosting

Anshul Negi — Sun, 13 Oct 2024 16:07:22 +0000

This is a submission for the The Pinata Challenge

What I Built

Free Image Hosting is a web application that allows users to temporarily store and share image files. It utilizes Pinata for storage and retrieval, enabling optimized image retrieval. MongoDB is used to store image properties and URLs.

Demo

Website : Live

Website Overview

Configure Image

Get Temporary Url

Getting Image by temporary Url

Url Expired/Image Not Found/Url Not Found

My Code

anshulnegitc / fimh

Free Image Hosting

Store and share file with temporary url.

A Next.js-based application that uses Pinata to store image files and MongoDB to store data. Images can be configured with different properties for optimization. Documents are deleted using a TTL index in MongoDB, and triggers-functions in MongoDB remove the corresponding files from Pinata

🚀 Features

Seamless Image Upload: File API to upload image.
Signed Url: Signed Url to access image for limited amount of time.
Optimized Performance: Leverages Pinata's Image Opimization for fast content delivery and enhanced user experience.

📂 Tech Stack

Frontend: React, Next.js
Backend: Next.js, Pinata API, MongoDb
Styling: Bootstrap
Hosting: Vercel

⚙️ Setup & Installation

Clone the Repository

git clone https://github.com/anshulnegitc/fimh.git
cd fimh

Install Dependencies::
```
npm install
```
Environment Variables: Set up environment variables for Pinata API keys in a .env.local file(Place .env.local inside fimh folder):
```
NEXT_PUBLIC_PINATA_JWT=your_api_key
NEXT_PUBLIC_GATEWAY_URL=your_secret_key
NEXT_PUBLIC_DATABASE_URL=your_mongo_connection_url
```
…

View on GitHub

More Details

Pinata Files API is used to upload the image.
Pinata Signed URL is used to access the image for a limited amount of time.
Pinata Image Optimizations can be set to improve the load time and experience when viewing image content.

For project setup and other configuration Github

Url Shortener

Anshul Negi — Mon, 29 Aug 2022 17:42:00 +0000

Overview of My Submission

It's an imitation of Url Shortener Service.

Only functional requirements are considered while developing this project i.e to generate short url and redirect short url to original url.

In case url got expired/moved to other domain/not responsding, a 404 error page is shown.

Redis is used as primary as well as caching database here.

Some analytics and expression values(like,star,thumbs up etc...) are permanently stored in database while urls are short lived.

Submission Category:

MEAN/MERN Mavericks

Language Used:

NodeJs & React

Link to Code

Frontend:

anshulnegitc / url-shortener-app-frontend

Url Shortener Application

It's an imitation of Url Shortener Service.

Only functional requirements are considered while developing this project i.e to generate short url and redirect short url to original url.

In case url got expired/moved to other domain/not responsding, a 404 error page is shown.

Redis is used as primary as well as caching database here.

Some analytics and expression values(like,star,thumbs up etc...) are permanently stored in database while urls are short lived.

Application Architecture.

Desktop View.

404 Page.

Analytics.

Mobile View.

Overview video

Here's a short video that explains the project and how it uses Redis:

How it works

How the data is stored:

Urls.
- It maps the long_url with short_url.
- short_url is base62 value of counter and is indexed.
- Expiration of 30 mins is set.
- Data is stored as

class Url extends Entity { }
const urlSchema = new Schema(Url, {
    long_url: { type: 'string' }
    short_url:

…

View on GitHub

Backend:

anshulnegitc / url-shortener-app-backend

Url Shortener Application

It's an imitation of Url Shortener Service.

Only functional requirements are considered while developing this project i.e to generate short url and redirect short url to original url.

In case url got expired/moved to other domain/not responsding, a 404 error page is shown.

Redis is used as primary as well as caching database here.

Some analytics and expression values(like,star,thumbs up etc...) are permanently stored in database while urls are short lived.

Application Architecture.

Desktop View.

404 Page.

Analytics.

Mobile View.

Overview video

Here's a short video that explains the project and how it uses Redis:

How it works

How the data is stored:

Urls.
- It maps the long_url with short_url.
- short_url is base62 value of counter and is indexed.
- Expiration of 30 mins is set.
- Data is stored as

class Url extends Entity { }
const urlSchema = new Schema(Url, {
    long_url: { type: 'string' }
    short_url:

…

View on GitHub

Check out Redis OM, client libraries for working with Redis as a multi-model database.
Use RedisInsight to visualize your data in Redis.
Sign up for a free Redis database.

designing database

Anshul Negi — Mon, 16 Mar 2020 07:15:54 +0000

I am new to database architecture though familiar with queries and aggregation in MongoDB.
At present working on a project where I have to store different user depending upon the type/role. There are few fields similar in the user model, would it be correct to create a separate collection for each role or just create separate schema then reference it i.e only a single collection.
In the future, more roles can be added with more information.
Any other approach is welcome.

Below is the mock models
Eg:
*customer =
{firstname,lastname,email,address,mobileno,password,role}
*sales = {firstname,lastname,email,address,mobileno,password,role,attachments,experience,
education}
*marketting =
{teamName,email,address,mobileno,password,role,members,attachments}