Merge pull request #7 from devzero-inc/feature/roadmap-voting-app

#00 AS: initializes app with authentication frontend

roadmap-voting-app/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

roadmap-voting-app/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# 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

roadmap-voting-app/README.md

@@ -0,0 +1,62 @@
+# Roadmap Voting App
+
+## Overview
+A roadmap voting app that democratizes the development process by enabling authenticated users to influence a project's trajectory. Through a simple and intuitive interface, users can vote on proposed features, track the progress of development items, and see at a glance which enhancements are up next or already completed. This platform ensures that every voice is heard and that the project aligns closely with the community's most valued feedback and needs.
+
+![Alt Text](https://i.imgur.com/z4eX0lD.png)
+
+## Table of contents
+- [Todo](#todo)
+- [Features](#features)
+- [Technologies Used](#technologies-used)
+- [High Level Design](#high-level-design)
+- [Tech Stack](#tech-stack)
+- [Installation](#installation)
+
+## Todo
+1. Dockerizing
+1. Testing
+
+## Features
+- **User Authentication:** Secure signup and sign-in capabilities to ensure a personalized and secure voting experience.
+- **Voting System:** Users can cast their votes on feature proposals, influencing the priority of the project's development roadmap.
+- **Development Tracking:** View the progress of different features from conception through to completion with clear, status-based categorization.
+- **Roadmap Overview:** An at-a-glance look at the project's development pipeline, including upcoming, in-progress, and completed items.
+
+
+## Technologies Used   
+
+- **Database + Auth service:** [Supabase](https://supabase.com/)
+- **Backend + Frontend:** [Next.js](https://nextjs.org/)
+- **Styling:** [TailwindCSS](https://tailwindcss.com/)
+
+## High Level Design
+
+![Alt Text](https://i.imgur.com/MtVWN7J.jpeg)
+
+The Roadmap Voting App offers an intuitive and collaborative platform for users to engage with and influence product development roadmaps. It integrates a seamless authentication process through Supabase, enabling users to vote on features after signing in. The frontend interfaces with a backend API that interacts with the Supabase database, managing entities such as users, posts, and votes. User interactions on the frontend trigger API calls, prompting state changes and data updates which are then dynamically reflected on the user interface. This continuous loop ensures a real-time, interactive experience, allowing the community's preferences to directly shape the product's evolution.
+
+## Tech Stack
+
+**Database + Auth Service:** Our application leverages Supabase, an open-source Firebase alternative that combines both database and authentication services. Supabase provides us with a PostgreSQL database for robust and relational data storage, along with secure and scalable user authentication.
+
+**Backend + Frontend:** We've chosen Next.js for its seamless integration of frontend and backend capabilities, providing a cohesive development experience. This is complemented by Tailwind CSS for styling, offering a utility-first approach that enables rapid and responsive design implementations.
+
+### Prerequisites
+- Nodejs
+- Docker
+
+## Installation
+
+Run locally: 
+```bash
+git clone https://github.com/devzero-inc/samples.git
+cd samples/roadmap-voting-app
+npm install
+npx supabase init
+npx supabase start
+npm run start app
+```
+App will be running on ```PORT:3000``` -> [http://localhost:3000/](http://localhost:3000/)
+
+Now just go to [http://localhost:3000/](http://localhost:3000/) and explore the application.

roadmap-voting-app/app/auth/signin/page.tsx

@@ -0,0 +1,21 @@
+import Link from "next/link";
+
+const Signup = () => {
+    return (
+        <div className=" bg-cusSec border border-cusBorder flex-1 w-[50%] mb-5 rounded-lg text-white p-4 flex flex-col items-center justify-around">
+            <h1 className=" text-6xl font-bold bg-clip-text text-transparent bg-custom-gradient p-2">Sign In</h1>
+            <form className="flex flex-col gap-4">
+                <input className=" px-4 py-3 rounded-lg bg-cusInput outline-none" type="email" placeholder="Enter your email"/>
+                <input className=" px-4 py-3 rounded-lg bg-cusInput outline-none" type="password" placeholder="Enter your password"/>
+                <Link href="/auth/signup" className="outline-none text-center">
+                    Don't have an account? <span className="bg-clip-text text-transparent bg-custom-gradient">Signup</span>
+                </Link>
+                <button className=" bg-custom-gradient px-4 py-3 rounded-lg outline-none">
+                    Sign In
+                </button>
+            </form>
+        </div>
+    )
+}
+
+export default Signup

roadmap-voting-app/app/auth/signup/page.tsx

@@ -0,0 +1,22 @@
+import Link from "next/link";
+
+const Signup = () => {
+    return (
+        <div className=" bg-cusSec border border-cusBorder flex-1 w-[50%] mb-5 rounded-lg text-white p-4 flex flex-col items-center justify-around">
+            <h1 className=" text-6xl font-bold bg-clip-text text-transparent bg-custom-gradient p-2">Sign Up</h1>
+            <form className="flex flex-col gap-4">
+                <input className=" px-4 py-3 rounded-lg bg-cusInput outline-none" type="text" placeholder="Enter your name"/>
+                <input className=" px-4 py-3 rounded-lg bg-cusInput outline-none" type="email" placeholder="Enter your email"/>
+                <input className=" px-4 py-3 rounded-lg bg-cusInput outline-none" type="password" placeholder="Enter your password"/>
+                <Link href="/auth/signin" className="outline-none text-center">
+                    Already have an account? <span className="bg-clip-text text-transparent bg-custom-gradient">Signin</span>
+                </Link>
+                <button className=" bg-custom-gradient px-4 py-3 rounded-lg outline-none">
+                    Sign Up
+                </button>
+            </form>
+        </div>
+    )
+}
+
+export default Signup

roadmap-voting-app/app/globals.css

@@ -0,0 +1,34 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb:15 11 41 ;
+  --background-end-rgb: 15 11 41;
+  /* background-color: rgb(121, 33, 146); */
+}
+
+/* @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));
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}

roadmap-voting-app/app/layout.tsx

@@ -0,0 +1,28 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import Navbar from "@/components/Navbar";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <div className="w-full h-screen overflow-auto flex flex-col gap-5 items-center">
+          <Navbar />
+          {children}
+        </div>
+      </body>
+    </html>
+  );
+}

roadmap-voting-app/app/page.tsx

@@ -0,0 +1,8 @@
+
+export default function Home() {
+  return (
+    <div className="">
+
+    </div>
+  );
+}

roadmap-voting-app/components/Navbar.tsx

@@ -0,0 +1,40 @@
+import Image from "next/image"
+import Link from "next/link"
+
+const Navbar = () => {
+
+
+
+    return (
+        <div className="bg-cusSec border-cusBorder border w-[50%] text-white flex items-center justify-between mt-5 p-2 rounded-lg">
+            <div className="flex items-center">
+                <Link href="/" className="outline-none">
+                    <Image
+                        src="/assets/logos/devzero_logo.png"
+                        alt="Devzero"
+                        width={75}
+                        height={75}
+                    />
+                </Link>
+                <div>
+                    <h1 className=" text-3xl tracking-wide font-bold">DevZero</h1>
+                    <p className=" text-sm text-gray-400">Roadmap voting app</p>
+                </div>
+            </div>
+            <div className="flex gap-4 items-center px-4">
+                <Link href="/auth/signin" className="outline-none">
+                    <button className="bg-custom-gradient px-4 py-2 rounded-full w-32">
+                        Sign in
+                    </button>
+                </Link>
+                <Link href="/auth/signup" className="outline-none">
+                    <button className="bg-custom-gradient px-4 py-2 rounded-full w-32">
+                        Sign up
+                    </button>
+                </Link>
+            </div>
+        </div>
+    )
+}
+
+export default Navbar

roadmap-voting-app/next.config.mjs

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