fun-project

💕 Fun Proposal Website

A playful web application where users can create shareable proposal links with an interactive twist - the “No” button runs away when you try to click it!

🌐 Live Demo: Deploy your own instance

✨ Features

• ✨ Create custom proposals with your name
• 🔗 Generate unique shareable links for each proposal
• 💖 Interactive “Yes” and “No” buttons
• 🏃 The “No” button moves away when hovered or clicked
• 🎉 Celebration animation when “Yes” is clicked
• 📊 Response tracking in database
• 📱 Mobile responsive design

Tech Stack

• Frontend: HTML, CSS, JavaScript
• Backend: Node.js + Express
• Database: SQLite
• Dependencies:
  • express: Web server framework
  • sqlite3: Database
  • uuid: Unique ID generation

🚀 Installation & Running

Prerequisites

• Node.js (v14 or higher)
• npm (comes with Node.js)

Quick Start

1. Clone the repository (or download the code)

   git clone https://github.com/jayantajm1/fun-project.git
   cd fun-project
   

2. Install dependencies

   npm install
   

3. Run the project

You can run the project using either of these commands:

npm start

Or directly with Node:

node server.js

1. Access the application

Open your browser and navigate to:

http://localhost:3000

The server will start on port 3000 by default. You should see:

✅ Server running on http://localhost:3000

Stopping the Server

Press Ctrl + C in the terminal to stop the server.

🌐 Deployment

This project is deployed on Render.com and is live at:

Live URL: https://fun-project-85yv.onrender.com

Deploy Your Own

For detailed deployment instructions to Render.com, see DEPLOYMENT.md

The project includes:

• render.yaml - Render configuration for auto-deployment
• Automatic deployment from GitHub on every push to master
• Environment variables handled by Render

How to Use

Creating a Proposal

1. Go to http://localhost:3000
2. Enter your name
3. Write your proposal (e.g., “Will you be my Valentine?”)
4. Click “Create Proposal”
5. Copy the generated link and share it!

Responding to a Proposal

1. Open the shared link
2. Read the proposal
3. Try to click “No” - watch it run away! 😄
4. Click “Yes” to accept (it’s the only way!)
5. Enjoy the celebration animation 🎉

Database Schema

Proposals Table

• id: Auto-incrementing primary key
• unique_id: UUID for the shareable link
• creator_name: Name of the person creating the proposal
• proposal_text: The proposal message
• created_at: Timestamp

Responses Table

• id: Auto-incrementing primary key
• proposal_id: Foreign key to proposals
• response: User’s response (yes/no)
• responded_at: Timestamp

API Endpoints

• POST /api/proposals - Create a new proposal
• GET /api/proposals/:uniqueId - Get proposal details
• POST /api/responses - Submit a response
• GET /api/proposals/:uniqueId/stats - Get proposal statistics

File Structure

fun-project/
├── server.js              # Express server and API routes
├── package.json           # Dependencies and scripts
├── proposals.db           # SQLite database (auto-created)
├── public/
│   ├── index.html        # Home page (create proposal)
│   ├── proposal.html     # Proposal view page
│   ├── styles.css        # All styles
│   ├── script.js         # Home page logic
│   └── proposal.js       # Proposal page logic (moving button)
└── README.md             # This file

Customization Ideas

• Change the colors and gradients in styles.css
• Modify the button movement behavior in proposal.js
• Add sound effects when buttons are clicked
• Create different themes for different occasions
• Add email notifications when someone responds
• Allow uploading images with proposals

Notes

• The database file proposals.db is created automatically on first run
• All proposals are stored permanently in the database
• Each proposal has a unique UUID in the URL
• The “No” button uses absolute positioning to move randomly

Fun Facts

• The “No” button will always escape! 🏃‍♂️
• Confetti celebration appears when “Yes” is clicked 🎊
• Perfect for Valentine’s Day, proposals, or just having fun with friends!

Enjoy creating fun proposals! 💕