SETUP: Initial setup

.eslintignore

@@ -0,0 +1,7 @@
+.yarn
+node_modules
+.next
+dist
+next-env.d.ts
+yarn.lock
+README.md

.eslintrc

@@ -0,0 +1,22 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "node": true
+    },
+    "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+    "overrides": [],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": ["@typescript-eslint", "prettier"],
+    "rules": {
+        "linebreak-style": ["error", "unix"],
+        "quotes": ["error", "single"],
+        "semi": ["error", "always"],
+        "react/react-in-jsx-scope": "off",
+        "no-mixed-spaces-and-tabs": "off"
+    }
+}

.github/workflows/pre-commit-checks.yml

@@ -0,0 +1,35 @@
+name: Pre-commit checks
+
+on:
+    pull_request:
+        branches: ['*']
+
+jobs:
+    Lint_Check:
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Check out code
+              uses: actions/checkout@v2
+
+            - name: Set up Node.js
+              uses: actions/setup-node@v2
+              with:
+                  node-version: 18
+
+            - name: Cache Node.js dependencies
+              uses: actions/cache@v2
+              with:
+                  path: ~/.npm
+                  key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
+                  restore-keys: |
+                      ${{ runner.os }}-node-
+
+            - name: Install dependencies
+              run: yarn
+
+            - name: Lint check
+              run: yarn lint:check
+
+            - name: Prettier check
+              run: yarn format:check

.gitignore

@@ -0,0 +1,38 @@
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# pnp
+.pnp.*

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn run check:all

.prettierignore

@@ -0,0 +1,7 @@
+.yarn
+node_modules
+.next
+dist
+next-env.d.ts
+yarn.lock
+README.md

.prettierrc

@@ -0,0 +1,7 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true,
+    "printWidth": 120
+}

Doc/Product Requirements Document.md

@@ -7,29 +7,29 @@ Tiny Site is a user-friendly website that reduces the length of your URL(Uniform
 ## Objective
 
 **The objectives of the tiny site are as follows:**
- - Create a user-friendly web application to generate short URLs for long and complex ones, facilitating easy sharing and improved memorability.
- - Enable users to track and analyze URL statistics, including access frequency and timestamps of accesses.
- - Provide customization options, such as adding aliases to URLs and configuring URL properties (e.g., alias length, validity period, updates, deletion).
- - Deliver a scalable and highly available service with low latency and high throughput.
 
+-   Create a user-friendly web application to generate short URLs for long and complex ones, facilitating easy sharing and improved memorability.
+-   Enable users to track and analyze URL statistics, including access frequency and timestamps of accesses.
+-   Provide customization options, such as adding aliases to URLs and configuring URL properties (e.g., alias length, validity period, updates, deletion).
+-   Deliver a scalable and highly available service with low latency and high throughput.
 
 ## Context
 
-- **Customer Personas:** Our target users include social media enthusiasts, developer,digital marketers, and anyone who frequently shares links online.
-- **Use Cases:** Users can shorten URLs, customize shortened links (if they create an account), and track click-through rates (CTR) and other performance metrics.
-- **Competitive Landscape:** Key competitors include Bitly, Rebrandly, and TinyURL. We aim to differentiate ourselves by offering a sleek user interface, advanced analytics, and customizable short URLs.
+-   **Customer Personas:** Our target users include social media enthusiasts, developer,digital marketers, and anyone who frequently shares links online.
+-   **Use Cases:** Users can shorten URLs, customize shortened links (if they create an account), and track click-through rates (CTR) and other performance metrics.
+-   **Competitive Landscape:** Key competitors include Bitly, Rebrandly, and TinyURL. We aim to differentiate ourselves by offering a sleek user interface, advanced analytics, and customizable short URLs.
 
 ## Assumptions
 
-- **Positive Impact Assumptions:** 
-  1. Users value the ability to customize short URLs.
-  2. Users are concerned about link tracking and analytics.
-  3. The market for URL shorteners is growing.
-- **Negative Impact Assumptions:** 
-  1. Users may have security and privacy concerns regarding link tracking.
-  2. Building a reliable link shortening service may require significant server resources.
-- **Validation:** We will validate these assumptions through user surveys, feedback collection, and monitoring server resource usage during development.
-- **Dependencies:** The successful deployment of Tiny Site URL Shortener depends on third-party libraries for link shortening algorithms, server hosting, and reliable internet connectivity.
+-   **Positive Impact Assumptions:**
+    1. Users value the ability to customize short URLs.
+    2. Users are concerned about link tracking and analytics.
+    3. The market for URL shorteners is growing.
+-   **Negative Impact Assumptions:**
+    1. Users may have security and privacy concerns regarding link tracking.
+    2. Building a reliable link shortening service may require significant server resources.
+-   **Validation:** We will validate these assumptions through user surveys, feedback collection, and monitoring server resource usage during development.
+-   **Dependencies:** The successful deployment of Tiny Site URL Shortener depends on third-party libraries for link shortening algorithms, server hosting, and reliable internet connectivity.
 
 ## Scope
 
@@ -39,61 +39,59 @@ Tiny Site is a user-friendly website that reduces the length of your URL(Uniform
 
 1. User registration and authentication.
 2. User-friendly UI for URL shortening.
-   - Streamlined interface for easy URL submission and shortening process.
+    - Streamlined interface for easy URL submission and shortening process.
 3. Generation of unique short URLs to prevent repetition.
-   - Algorithm to ensure unique short URLs are generated for each original URL.
+    - Algorithm to ensure unique short URLs are generated for each original URL.
 4. Displaying a list of all created short URLs.
-   - User dashboard to view and manage their list of shortened URLs.
+    - User dashboard to view and manage their list of shortened URLs.
 5. No Expiry
-   - Short URLs created in this version do not have expiration options.
-
+    - Short URLs created in this version do not have expiration options.
 
 **Version 2(Security and Analytics)**
 
 1. Password Protection for short URLs.
-   - Allow users to set passwords for specific short URLs.
+    - Allow users to set passwords for specific short URLs.
 2. Link Expiration options (View-based).
-   - Set short URLs to expire after a certain number of views.
+    - Set short URLs to expire after a certain number of views.
 3. URL statistics tracking, including:
-   - Track access count for each short URL.
-   - Record timestamp of each access for analytics.
+    - Track access count for each short URL.
+    - Record timestamp of each access for analytics.
 4. Link QR Code generator with Custom Logo.
-   - Generate QR codes for short URLs, with customizable logo integration.
+    - Generate QR codes for short URLs, with customizable logo integration.
 5. Customization of short URLs:
-   - Enable users to update the original URL associated with a short URL.
-   - Provide an option to delete a short URL.
+    - Enable users to update the original URL associated with a short URL.
+    - Provide an option to delete a short URL.
 
 **Version 3( Advanced Marketing)**
 
 1. UTM builder with links, including a manager.
-   - Integrated UTM parameter builder for generating campaign tracking URLs.
+    - Integrated UTM parameter builder for generating campaign tracking URLs.
 2. Open Graph Image Manager (providing preview and customization).
-   - Allow users to customize the preview image and text for social media sharing.
+    - Allow users to customize the preview image and text for social media sharing.
 3. iOS app and Android App for deep linking.
-   - Develop dedicated mobile apps that support deep linking to app content.
+    - Develop dedicated mobile apps that support deep linking to app content.
 4. Link masking (Allow users to hide the original URL).
-   - Provide the option to mask the original URL behind the short URL.
+    - Provide the option to mask the original URL behind the short URL.
 
 **Version 4 (Optimization and Performance)**
 
 1. High availability and scalability for seamless usage.
-   - Design the system architecture for redundancy and uptime.
+    - Design the system architecture for redundancy and uptime.
 2. Low-latency, high-throughput infrastructure for optimal performance.
-   - Optimize backend infrastructure to ensure rapid response times.
+    - Optimize backend infrastructure to ensure rapid response times.
 
 **Version 5 (Extended Functionality)**
 
 1. Browser extensions for quick URL shortening.
-   - Develop browser extensions for popular web browsers to enable users to shorten URLs with a single click.
+    - Develop browser extensions for popular web browsers to enable users to shorten URLs with a single click.
 2. Enhanced analytics and reporting features.
-   - Provide in-depth analytics tools for users to gain insights into their short URL performance.
+    - Provide in-depth analytics tools for users to gain insights into their short URL performance.
 3. Integration with other third-party services.
-   - Allow seamless integration with other services such as social media platforms or marketing automation tools.
+    - Allow seamless integration with other services such as social media platforms or marketing automation tools.
 4. API access for developers.
-   - Offer a public API that developers can use to programmatically interact with the URL shortening service.
+    - Offer a public API that developers can use to programmatically interact with the URL shortening service.
 5. Support for custom domains.
-   - Enable users to use their custom domains for shortening URLs, enhancing brand identity and trust.
-
+    - Enable users to use their custom domains for shortening URLs, enhancing brand identity and trust.
 
 ### User Stories
 
@@ -104,6 +102,7 @@ Tiny Site is a user-friendly website that reduces the length of your URL(Uniform
 5. As a user, I want to have a simple and intuitive user interface.
 
 ### Wireframes
+
 ![Tiny Site](https://github.com/Real-Dev-Squad/tiny-site/assets/70854507/4ed96b84-e5f3-49c2-8f51-57f46876ff21)
 
 ## Performance

README.md

@@ -1,2 +1,34 @@
-# website-template
-A template to create all public facing sites
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+module.exports = nextConfig;

package.json

@@ -0,0 +1,44 @@
+{
+    "name": "tiny-site",
+    "version": "1.0.0",
+    "description": "This is a tiny site built with Next.js and Tailwind CSS",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "format:check": "prettier --check .",
+        "format:fix": "prettier --write .",
+        "lint:check": "eslint . --ext .js,.jsx,.ts,.tsx, src/",
+        "lint:fix": "eslint . --fix --ext js,jsx,ts,tsx, src/",
+        "check:all": "yarn format:check && yarn lint:check",
+        "fix:all": "yarn format:fix && yarn lint:fix",
+        "prepare": "husky install"
+    },
+    "dependencies": {
+        "autoprefixer": "10.4.15",
+        "next": "13.4.19",
+        "postcss": "8.4.29",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "tailwindcss": "3.3.3",
+        "typescript": "5.2.2"
+    },
+    "devDependencies": {
+        "@types/eslint": "^8",
+        "@types/node": "20.5.9",
+        "@types/react": "18.2.21",
+        "@types/react-dom": "18.2.7",
+        "@typescript-eslint/eslint-plugin": "^6.6.0",
+        "@typescript-eslint/parser": "^6.0.0",
+        "eslint": "^8.48.0",
+        "eslint-config-prettier": "^9.0.0",
+        "eslint-plugin-prettier": "^5.0.0",
+        "husky": "^8.0.3",
+        "prettier": "^3.0.3"
+    },
+    "volta": {
+        "node": "18.14.0",
+        "yarn": "1.21.1"
+    }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};

src/app/globals.css

@@ -0,0 +1,22 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+    --foreground-rgb: 0, 0, 0;
+    --background-start-rgb: 214, 219, 220;
+    --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --foreground-rgb: 255, 255, 255;
+        --background-start-rgb: 0, 0, 0;
+        --background-end-rgb: 0, 0, 0;
+    }
+}
+
+body {
+    color: rgb(var(--foreground-rgb));
+    background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
+}