DEV Community: FatimaZehra.Dev

How do you handle "Hackathon Burnout" after shipping two projects back-to-back?

FatimaZehra.Dev — Mon, 08 Jun 2026 17:44:04 +0000

Hey DEV Community! 👋

I just officially hit "submit" on my entries for both the June Solstice Game Jam (I built Solstice Sync, a fast-paced cosmic alignment game using React and Gemini 2.5-Flash) and the Finish-Up-Thon challenge.

It has been an absolutely wild, high-energy couple of weeks. Building the frontend logic, managing the state, dealing with API timing dependencies, and getting everything deployed in time was an incredible rush—but man, my brain is completely fried today! 😂

Now that the code is shipped and the submissions are locked in, I'm sitting here staring at a blank VS Code window wondering what to do next.

💬 My question for the community:
How do you transition out of "crunch mode" after a major hackathon or project deadline?

Do you dive straight into learning a new stack (like plunging into backend/cloud databases)?

Do you close the laptop completely for 48 hours to touch grass?

Or do you just spend your time playing and testing other participants' submissions?

Drop your post-hackathon recovery routines below! And if you also participated in the Solstice Jam or the Finish-Up-Thon, drop your project links—I'd love to check out what you built! 👇

Solstice Sync: A Dynamic Gemini AI Alignment Puzzle

FatimaZehra.Dev — Thu, 04 Jun 2026 14:02:26 +0000

This is a submission for the June Solstice Game Jam

What I Built

Solstice Sync is a fast-paced cosmic puzzle game where players must balance the light and shadow forces of the June Solstice. The goal is to achieve the highest synchronization score possible within a strict 30-second countdown. Every 6 seconds, the game delivers a cryptic text prompt representing either intense daylight or deep twilight, and players must quickly align the energy core to match the theme before time runs out.

Video Demo

Here is the complete 34-second gameplay loop demonstration showcasing the start screen, live gameplay mechanics, rapid synchronization scoring, and the final stabilization sequence:

https://www.youtube.com/watch?v=EfIvIQ7KimU

Code

You can explore the full React architecture, state management lifecycle, and component scripts in my repository here:

[View GitHub Repository] https://github.com/j85219826-star/june-solstice-game-jam
🌐 [Play Live Game Here] https://j85219826-star.github.io/june-solstice-game-jam/

How I Built It

The application is architected entirely using React 19 and bundled via Vite for optimized fast-refresh compilation.

State & Lifecycle Management: Built using robust React core hooks (useState, useEffect, useRef). I utilized refs to cleanly synchronize the independent 1-second countdown interval with the 6-second cosmic prompt rotation cadence.
Resilient Fallback Design: To prevent the user experience from degrading due to live browser network restrictions or client-side CORS barriers on public hosts, I engineered a structural fail-safe array containing 16 unique, pre-composed light/shadow riddles. If a backend request encounters an origin block, the application gracefully flags the catch-block and continuously serves random variations to guarantee 100% gameplay uptime.
UI Design System: Designed with a custom inline layout mimicking a modern dark-mode terminal framework. It utilizes stark blue-slate variations (#0F172A, #1E293B) combined with glowing neon indicators to create a highly responsive, atmospheric aesthetic.

Prize Category

Best Google AI Usage

This project is configured directly with the official @google/genai SDK and utilizes the Gemini 2.5-Flash model. In local runtime environments, the system completely bypasses hardcoded text arrays to execute live zero-shot prompt requests, treating Gemini as a dynamic "Celestial Narrator" that generates completely unique, poetic statements about light or dark alignments on the fly.

Upgrading Bismillah Restaurant: How I Built a Dynamic React Booking Center with GitHub Copilot

FatimaZehra.Dev — Wed, 03 Jun 2026 20:52:17 +0000

This is a submission for the GitHub Finish-Up-A-Thon Challenge

What I Built

A while ago, I built a multi-page Restaurant Web Application using React for a local venue, Bismillah Restaurant. It features an elegant responsive layout, a beautifully structured interactive menu across four detailed component routes, and smooth navigation. However, the communication system was completely static: it only featured a generic "Contact Us" form with basic text areas.

To make it production-ready, I upgraded this basic communication layer into a dynamic, production-grade "Book a Table" Reservation System packed with controlled input states, data validation, and responsive interactive feedback layouts.

Demo

The Comeback Story

Before diving into new features, I loaded my baseline React platform. While the interface looked visually appealing, clicking submit on a generic message form didn't capture critical operational data like guest counts, arrival dates, or seating times.

By refactoring the existing layout, the component transformed completely. The upgraded dashboard features high-contrast access fields for dates and party sizes, fluid UI adjustments across mobile viewport scales, and an instantaneous confirmation banner upon successful allocation without forcing a browser refresh. Upgrading an asset I thought was complete opened my eyes to how software scales in response to real-world business needs.

My Experience with GitHub Copilot

Instead of manually rewriting event handlers, adding input states, and refactoring form wrapper styles from scratch, I initialized a session with GitHub Copilot inside VS Code to accelerate my implementation velocity.

I provided Copilot with a precise engineering blueprint to overhaul my existing layout. Copilot swiftly processed the structural requirements, outputting an upgraded functional component utilizing clean React useState hooks to track a comprehensive new reservation dataset.

My AI Collaboration Session Logs:

What impressed me most was how context-aware the helper was; it instantly set up conditional execution blocks to smoothly replace the form interface with an interactive success state banner upon form processing, keeping the entire user experience fluid and single-page. It managed consolidated form states, inline error validation for numbers and emails, and built an auto-hiding confirmation card overlay with a smooth background blur effect. Using AI systems like GitHub Copilot isn't about skipping the fundamentals—it's about offloading boilerplate mechanics so I can spend my cognitive energy on component architecture and fluid user experiences.

How to Handle Secure File Uploads in Node.js and Express Without Memory Bloat:

FatimaZehra.Dev — Tue, 02 Jun 2026 14:48:51 +0000

Handling image and file uploads is a core feature of almost every modern web application, especially e-commerce prototypes and dashboards. However, many developers make the mistake of reading entire uploaded files directly into server RAM. If multiple users upload large images simultaneously, your Node.js backend can quickly run out of memory and crash.

The Problem
Standard file handlers often cache the incoming file buffers completely in memory before writing them to the disk. For a production server, this creates a major bottleneck and leaves your application vulnerable to Denial of Service (DoS) attacks via massive file streams.

The Solution: Stream-Based Uploads with Multer
By utilizing multer with its diskStorage engine, we can stream files directly to our local directory as they arrive. This ensures that Node.js maintains a tiny memory footprint regardless of whether the file is 10 Kilobytes or 10 Megabytes.

JavaScript
const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();
const PORT = 5000;

// 1. Configure storage destination and custom file naming
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, 'uploads/'); // Make sure this folder exists in your project root
},
filename: (req, file, cb) => {
// Generate a unique suffix using timestamps to avoid overwriting files
const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname));
}
});

// 2. Define strict file filters for security
const fileFilter = (req, file, cb) => {
const allowedTypes = /jpeg|jpg|png|webp/;
const isExtensionValid = allowedTypes.test(path.extname(file.originalname).toLowerCase());
const isMIMEValid = allowedTypes.test(file.mimetype);

if (isExtensionValid && isMIMEValid) {
return cb(null, true);
} else {
cb(new Error('Security Error: Only JPEG, JPG, PNG, and WEBP images are allowed!'));
}
};

// 3. Initialize multer with strict size limits (Max: 2MB)
const upload = multer({
storage: storage,
fileFilter: fileFilter,
limits: { fileSize: 2 * 1024 * 1024 } // 2MB limit protects your server storage
});

// 4. The Upload Endpoint Route
app.post('/api/upload', upload.single('productImage'), (req, file, res) => {
try {
if (!req.file) {
return res.status(400).json({ success: false, message: 'No file uploaded.' });
}

// File successfully saved via stream processing
res.status(200).json({
  success: true,
  message: 'Image uploaded successfully!',
  filePath: req.file.path
});

} catch (error) {
res.status(500).json({ success: false, error: error.message });
}
});

// Global Error Handler for Multer limits
app.use((err, req, res, next) => {
if (err instanceof multer.MulterError) {
return res.status(400).json({ success: false, message: Upload error: ${err.message} });
}
if (err) {
return res.status(400).json({ success: false, message: err.message });
}
next();
});

app.listen(PORT, () => console.log(Backend server running on port ${PORT}));
Why This Architecture is Production-Ready
Zero-Bloat Disk Streams: multer.diskStorage streams chunks of binary data directly onto the server hard drive instead of gathering the whole file in the V8 engine memory heap first.

Double-Layer Validation: Checking both the file extension and the browser-reported mimetype prevents attackers from disguising malicious executable scripts as harmless images.

Proactive Buffer Control: Setting a hard limit of 2MB inside the limits object ensures that the upload process terminates immediately if a file exceeds the budget, saving your network bandwidth.

Custom Naming Conventions: Combining the current timestamp with a randomized math string ensures that if two users upload an image named avatar.png at the exact same moment, neither file will get overwritten or lost.

How to Create a Dynamic Shopping Cart Total with React useMemo:

FatimaZehra.Dev — Tue, 02 Jun 2026 14:45:51 +0000

Recalculating a shopping cart total on every single page re-render can drastically slow down a React application as the cart grows or as the user interacts with other UI elements. If your component re-renders because of a sidebar toggle or a theme switch, React will completely rebuild that array calculation from scratch, wasting valuable processing power.

The Solution
By using the useMemo hook, we can tell React to cache (or memoize) the computed total value. The application will only recalculate the total price when the actual items inside the cart change, keeping your e-commerce frontend incredibly fast and responsive.

JavaScript
import React, { useState, useMemo } from 'react';

const ShoppingCart = () => {
// Sample cart state containing items from our e-commerce catalog
const [cart, setCart] = useState([
{ id: 1, name: 'Premium Blue Hoodie', price: 45, quantity: 1 },
{ id: 2, name: 'Dark Green Minimalist Watch', price: 120, quantity: 1 },
]);

// useMemo ensures this calculation only runs when the 'cart' array changes
const cartTotal = useMemo(() => {
console.log('Calculating total...'); // This runs only when items change!
return cart.reduce((total, item) => total + (item.price * item.quantity), 0);
}, [cart]);

return (

Your Shopping Cart

{item.name} Price: ${item.price} | Qty: {item.quantity}

Total Price: ${cartTotal}

);
};

export default ShoppingCart;
How It Works Under the Hood
The Array Reduce Method: Inside the hook, cart.reduce() loops through our items, multiplies each price by its quantity, and adds them up to create a single, clean total number.

The Dependency Array: The [cart] at the very bottom is the critical trigger. It acts as a guard, telling React to completely skip this calculation on incoming re-renders unless the cart data itself is modified.

Performance Optimization: By caching the result, if a user clicks other buttons on your e-commerce page that trigger re-renders, React instantly grabs the saved number instead of looping through the array again.

Cleaner UI Performance: This simple hook prevents layout lag, ensuring that your shopping cart remains seamless and ultra-fast even when handling hundreds of products.