BranchesTags

Repository files navigation


Logo

A powerful tool for anyone looking to improve their productivity and manage their projects more efficiently. Whether you're a small business owner, a project manager, or a freelancer,
Projx is the missing piece in your project puzzle.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. How It's Made
  4. Optimizations
  5. Lessons Learned
  6. Contributing
  7. Contact
  8. License

About The Project

Projx is a modern project management web app developed to streamline the project management process, making it easy for users to organize and track their projects, tasks, and schedules all in one place. Users need to register to be able to access the app which allows them to easily create and manage projects, add and assign tasks, set deadlines, and track progress. Projx is designed to be user-friendly and intuitive, making it easy for users to navigate and get started quickly.

Projx.-.The.missing.piece.in.your.project.puzzle.mp4

(back to top)

Built With

  • React
  • Next
  • Prisma
  • TypeScript
  • PostgreSQL
  • tailwindcss

(back to top)

Getting Started

Instructions

Prerequisites

You’ll need to have modern versions of node.js (LTS ^16.18 recommend) and yarn or npm installed.

Installation

  1. Clone the repo 
    git clone https://github.com/thinktapper/projx.git &&cd projx
  2. Install NPM packages 
    npm install
  3. Set up the environment variables: 
    cp -v .env.example .env
  4. Open .env and enter your local or remote Postgres DB URL and JWT secret 
    DATABASE_URL=''REMOTE_DATABASE_URL=''JWT_SECRET=''
  5. Create the database schema: 
    npx prisma db push
  6. Then, run the development server:
npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

This is a Next.js project bootstrapped with create-next-app.

(back to top)


How It's Made:

This project was made using React 18 and Next.js 13. I used TailwindCSS for styling and Prisma for generating a typesafe ORM to interact with the PostgreSQL database hosted on Railway.

(back to top)

Optimizations

With time, I would like to add the following features:

  • Add a dark mode
  • Add a search bar to easily find projects and tasks.
  • Add a calendar view for easy scheduling.
  • Create profile or social pages for users.
  • Add a drag and drop feature to easily move tasks between projects.
  • Add a notification system to keep users up to date on project progress.
  • Add a changelog to keep track of project updates.
  • Add more detailed documentation.
  • Create a mobile version of the app.

See the open issues for a full list of proposed features (and known issues).

(back to top)

Lessons Learned:

This full-stack project was a great way for me to learn about the new React 18 server components and how to use the new app directory structure introduced in Next.js 13. I learned by building Projx from scratch — From design spec to deployment — Using React, Node.js, TypeScript, Postgres.

Key Takeaways:

  • Strengthened skills needed to plan, scope, research, and deploy a full-stack web app.
  • Practiced using TypeScript for better type safety and code quality.
  • Practiced using TailwindCSS to quickly build out a UI from a design spec.
  • Learned how to build out and deploy a serverless API.
  • Practiced utilizing middleware to protect my app from unauthenticated users.
  • Learned how and when to use React Server Components to render content server-side, and when client-side components are necessary.
  • Learned how to use the new React 18 Suspense component to render loading states.
  • Learned how to set up continuous deployment with CI.
  • Gained experience debugging and troubleshooting TypeScript and ESLint build errors and deployment issues.

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

(back to top)

Contact

MadeByTapperLinkedIn

Andrew Tapper - @thinktapper - andrew@tapper.codes

Project Link: https://github.com/thinktapper/projx

(back to top)

License

GNU License

Distributed under the GNU GPLv3. See LICENSE for more information.

(back to top)

About

Full-stack app using the latest versions of React (v18) and Next.js (v13)

projx.vercel.app

Topics

nextjsreacttailwindcsstypescript

Resources

Readme
GPL-3.0 license
Activity

Stars

6 stars

Watchers

1 watching

Forks

0 forks
Report repository

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all \u003cpre\u003e\u003ccode\u003e blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks"); } } catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); } })(); (function(){ try { var __m = "github.com"; var __re = new RegExp('^' + "github\\.com" + '
Skip to content
BranchesTags

Repository files navigation


Logo

A powerful tool for anyone looking to improve their productivity and manage their projects more efficiently. Whether you're a small business owner, a project manager, or a freelancer,
Projx is the missing piece in your project puzzle.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. How It's Made
  4. Optimizations
  5. Lessons Learned
  6. Contributing
  7. Contact
  8. License

About The Project

Projx is a modern project management web app developed to streamline the project management process, making it easy for users to organize and track their projects, tasks, and schedules all in one place. Users need to register to be able to access the app which allows them to easily create and manage projects, add and assign tasks, set deadlines, and track progress. Projx is designed to be user-friendly and intuitive, making it easy for users to navigate and get started quickly.

Projx.-.The.missing.piece.in.your.project.puzzle.mp4

(back to top)

Built With

  • React
  • Next
  • Prisma
  • TypeScript
  • PostgreSQL
  • tailwindcss

(back to top)

Getting Started

Instructions

Prerequisites

You’ll need to have modern versions of node.js (LTS ^16.18 recommend) and yarn or npm installed.

Installation

  1. Clone the repo 
    git clone https://github.com/thinktapper/projx.git &&cd projx
  2. Install NPM packages 
    npm install
  3. Set up the environment variables: 
    cp -v .env.example .env
  4. Open .env and enter your local or remote Postgres DB URL and JWT secret 
    DATABASE_URL=''REMOTE_DATABASE_URL=''JWT_SECRET=''
  5. Create the database schema: 
    npx prisma db push
  6. Then, run the development server:
npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

This is a Next.js project bootstrapped with create-next-app.

(back to top)


How It's Made:

This project was made using React 18 and Next.js 13. I used TailwindCSS for styling and Prisma for generating a typesafe ORM to interact with the PostgreSQL database hosted on Railway.

(back to top)

Optimizations

With time, I would like to add the following features:

  • Add a dark mode
  • Add a search bar to easily find projects and tasks.
  • Add a calendar view for easy scheduling.
  • Create profile or social pages for users.
  • Add a drag and drop feature to easily move tasks between projects.
  • Add a notification system to keep users up to date on project progress.
  • Add a changelog to keep track of project updates.
  • Add more detailed documentation.
  • Create a mobile version of the app.

See the open issues for a full list of proposed features (and known issues).

(back to top)

Lessons Learned:

This full-stack project was a great way for me to learn about the new React 18 server components and how to use the new app directory structure introduced in Next.js 13. I learned by building Projx from scratch — From design spec to deployment — Using React, Node.js, TypeScript, Postgres.

Key Takeaways:

  • Strengthened skills needed to plan, scope, research, and deploy a full-stack web app.
  • Practiced using TypeScript for better type safety and code quality.
  • Practiced using TailwindCSS to quickly build out a UI from a design spec.
  • Learned how to build out and deploy a serverless API.
  • Practiced utilizing middleware to protect my app from unauthenticated users.
  • Learned how and when to use React Server Components to render content server-side, and when client-side components are necessary.
  • Learned how to use the new React 18 Suspense component to render loading states.
  • Learned how to set up continuous deployment with CI.
  • Gained experience debugging and troubleshooting TypeScript and ESLint build errors and deployment issues.

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

(back to top)

Contact

MadeByTapperLinkedIn

Andrew Tapper - @thinktapper - andrew@tapper.codes

Project Link: https://github.com/thinktapper/projx

(back to top)

License

GNU License

Distributed under the GNU GPLv3. See LICENSE for more information.

(back to top)

About

Full-stack app using the latest versions of React (v18) and Next.js (v13)

projx.vercel.app

Topics

nextjsreacttailwindcsstypescript

Resources

Readme
GPL-3.0 license
Activity

Stars

6 stars

Watchers

1 watching

Forks

0 forks
Report repository

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
BranchesTags

Repository files navigation


Logo

A powerful tool for anyone looking to improve their productivity and manage their projects more efficiently. Whether you're a small business owner, a project manager, or a freelancer,
Projx is the missing piece in your project puzzle.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. How It's Made
  4. Optimizations
  5. Lessons Learned
  6. Contributing
  7. Contact
  8. License

About The Project

Projx is a modern project management web app developed to streamline the project management process, making it easy for users to organize and track their projects, tasks, and schedules all in one place. Users need to register to be able to access the app which allows them to easily create and manage projects, add and assign tasks, set deadlines, and track progress. Projx is designed to be user-friendly and intuitive, making it easy for users to navigate and get started quickly.

Projx.-.The.missing.piece.in.your.project.puzzle.mp4

(back to top)

Built With

  • React
  • Next
  • Prisma
  • TypeScript
  • PostgreSQL
  • tailwindcss

(back to top)

Getting Started

Instructions

Prerequisites

You’ll need to have modern versions of node.js (LTS ^16.18 recommend) and yarn or npm installed.

Installation

  1. Clone the repo 
    git clone https://github.com/thinktapper/projx.git &&cd projx
  2. Install NPM packages 
    npm install
  3. Set up the environment variables: 
    cp -v .env.example .env
  4. Open .env and enter your local or remote Postgres DB URL and JWT secret 
    DATABASE_URL=''REMOTE_DATABASE_URL=''JWT_SECRET=''
  5. Create the database schema: 
    npx prisma db push
  6. Then, run the development server:
npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

This is a Next.js project bootstrapped with create-next-app.

(back to top)


How It's Made:

This project was made using React 18 and Next.js 13. I used TailwindCSS for styling and Prisma for generating a typesafe ORM to interact with the PostgreSQL database hosted on Railway.

(back to top)

Optimizations

With time, I would like to add the following features:

  • Add a dark mode
  • Add a search bar to easily find projects and tasks.
  • Add a calendar view for easy scheduling.
  • Create profile or social pages for users.
  • Add a drag and drop feature to easily move tasks between projects.
  • Add a notification system to keep users up to date on project progress.
  • Add a changelog to keep track of project updates.
  • Add more detailed documentation.
  • Create a mobile version of the app.

See the open issues for a full list of proposed features (and known issues).

(back to top)

Lessons Learned:

This full-stack project was a great way for me to learn about the new React 18 server components and how to use the new app directory structure introduced in Next.js 13. I learned by building Projx from scratch — From design spec to deployment — Using React, Node.js, TypeScript, Postgres.

Key Takeaways:

  • Strengthened skills needed to plan, scope, research, and deploy a full-stack web app.
  • Practiced using TypeScript for better type safety and code quality.
  • Practiced using TailwindCSS to quickly build out a UI from a design spec.
  • Learned how to build out and deploy a serverless API.
  • Practiced utilizing middleware to protect my app from unauthenticated users.
  • Learned how and when to use React Server Components to render content server-side, and when client-side components are necessary.
  • Learned how to use the new React 18 Suspense component to render loading states.
  • Learned how to set up continuous deployment with CI.
  • Gained experience debugging and troubleshooting TypeScript and ESLint build errors and deployment issues.

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

(back to top)

Contact

MadeByTapperLinkedIn

Andrew Tapper - @thinktapper - andrew@tapper.codes

Project Link: https://github.com/thinktapper/projx

(back to top)

License

GNU License

Distributed under the GNU GPLv3. See LICENSE for more information.

(back to top)

About

Full-stack app using the latest versions of React (v18) and Next.js (v13)

projx.vercel.app

Topics

nextjsreacttailwindcsstypescript

Resources

Readme
GPL-3.0 license
Activity

Stars

6 stars

Watchers

1 watching

Forks

0 forks
Report repository

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length \u003e 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
BranchesTags

Repository files navigation


Logo

A powerful tool for anyone looking to improve their productivity and manage their projects more efficiently. Whether you're a small business owner, a project manager, or a freelancer,
Projx is the missing piece in your project puzzle.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. How It's Made
  4. Optimizations
  5. Lessons Learned
  6. Contributing
  7. Contact
  8. License

About The Project

Projx is a modern project management web app developed to streamline the project management process, making it easy for users to organize and track their projects, tasks, and schedules all in one place. Users need to register to be able to access the app which allows them to easily create and manage projects, add and assign tasks, set deadlines, and track progress. Projx is designed to be user-friendly and intuitive, making it easy for users to navigate and get started quickly.

Projx.-.The.missing.piece.in.your.project.puzzle.mp4

(back to top)

Built With

  • React
  • Next
  • Prisma
  • TypeScript
  • PostgreSQL
  • tailwindcss

(back to top)

Getting Started

Instructions

Prerequisites

You’ll need to have modern versions of node.js (LTS ^16.18 recommend) and yarn or npm installed.

Installation

  1. Clone the repo 
    git clone https://github.com/thinktapper/projx.git &&cd projx
  2. Install NPM packages 
    npm install
  3. Set up the environment variables: 
    cp -v .env.example .env
  4. Open .env and enter your local or remote Postgres DB URL and JWT secret 
    DATABASE_URL=''REMOTE_DATABASE_URL=''JWT_SECRET=''
  5. Create the database schema: 
    npx prisma db push
  6. Then, run the development server:
npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

This is a Next.js project bootstrapped with create-next-app.

(back to top)


How It's Made:

This project was made using React 18 and Next.js 13. I used TailwindCSS for styling and Prisma for generating a typesafe ORM to interact with the PostgreSQL database hosted on Railway.

(back to top)

Optimizations

With time, I would like to add the following features:

  • Add a dark mode
  • Add a search bar to easily find projects and tasks.
  • Add a calendar view for easy scheduling.
  • Create profile or social pages for users.
  • Add a drag and drop feature to easily move tasks between projects.
  • Add a notification system to keep users up to date on project progress.
  • Add a changelog to keep track of project updates.
  • Add more detailed documentation.
  • Create a mobile version of the app.

See the open issues for a full list of proposed features (and known issues).

(back to top)

Lessons Learned:

This full-stack project was a great way for me to learn about the new React 18 server components and how to use the new app directory structure introduced in Next.js 13. I learned by building Projx from scratch — From design spec to deployment — Using React, Node.js, TypeScript, Postgres.

Key Takeaways:

  • Strengthened skills needed to plan, scope, research, and deploy a full-stack web app.
  • Practiced using TypeScript for better type safety and code quality.
  • Practiced using TailwindCSS to quickly build out a UI from a design spec.
  • Learned how to build out and deploy a serverless API.
  • Practiced utilizing middleware to protect my app from unauthenticated users.
  • Learned how and when to use React Server Components to render content server-side, and when client-side components are necessary.
  • Learned how to use the new React 18 Suspense component to render loading states.
  • Learned how to set up continuous deployment with CI.
  • Gained experience debugging and troubleshooting TypeScript and ESLint build errors and deployment issues.

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

(back to top)

Contact

MadeByTapperLinkedIn

Andrew Tapper - @thinktapper - andrew@tapper.codes

Project Link: https://github.com/thinktapper/projx

(back to top)

License

GNU License

Distributed under the GNU GPLv3. See LICENSE for more information.

(back to top)

About

Full-stack app using the latest versions of React (v18) and Next.js (v13)

projx.vercel.app

Topics

nextjsreacttailwindcsstypescript

Resources

Readme
GPL-3.0 license
Activity

Stars

6 stars

Watchers

1 watching

Forks

0 forks
Report repository

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content
BranchesTags

Repository files navigation


Logo

A powerful tool for anyone looking to improve their productivity and manage their projects more efficiently. Whether you're a small business owner, a project manager, or a freelancer,
Projx is the missing piece in your project puzzle.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. How It's Made
  4. Optimizations
  5. Lessons Learned
  6. Contributing
  7. Contact
  8. License

About The Project

Projx is a modern project management web app developed to streamline the project management process, making it easy for users to organize and track their projects, tasks, and schedules all in one place. Users need to register to be able to access the app which allows them to easily create and manage projects, add and assign tasks, set deadlines, and track progress. Projx is designed to be user-friendly and intuitive, making it easy for users to navigate and get started quickly.

Projx.-.The.missing.piece.in.your.project.puzzle.mp4

(back to top)

Built With

  • React
  • Next
  • Prisma
  • TypeScript
  • PostgreSQL
  • tailwindcss

(back to top)

Getting Started

Instructions

Prerequisites

You’ll need to have modern versions of node.js (LTS ^16.18 recommend) and yarn or npm installed.

Installation

  1. Clone the repo 
    git clone https://github.com/thinktapper/projx.git &&cd projx
  2. Install NPM packages 
    npm install
  3. Set up the environment variables: 
    cp -v .env.example .env
  4. Open .env and enter your local or remote Postgres DB URL and JWT secret 
    DATABASE_URL=''REMOTE_DATABASE_URL=''JWT_SECRET=''
  5. Create the database schema: 
    npx prisma db push
  6. Then, run the development server:
npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

This is a Next.js project bootstrapped with create-next-app.

(back to top)


How It's Made:

This project was made using React 18 and Next.js 13. I used TailwindCSS for styling and Prisma for generating a typesafe ORM to interact with the PostgreSQL database hosted on Railway.

(back to top)

Optimizations

With time, I would like to add the following features:

  • Add a dark mode
  • Add a search bar to easily find projects and tasks.
  • Add a calendar view for easy scheduling.
  • Create profile or social pages for users.
  • Add a drag and drop feature to easily move tasks between projects.
  • Add a notification system to keep users up to date on project progress.
  • Add a changelog to keep track of project updates.
  • Add more detailed documentation.
  • Create a mobile version of the app.

See the open issues for a full list of proposed features (and known issues).

(back to top)

Lessons Learned:

This full-stack project was a great way for me to learn about the new React 18 server components and how to use the new app directory structure introduced in Next.js 13. I learned by building Projx from scratch — From design spec to deployment — Using React, Node.js, TypeScript, Postgres.

Key Takeaways:

  • Strengthened skills needed to plan, scope, research, and deploy a full-stack web app.
  • Practiced using TypeScript for better type safety and code quality.
  • Practiced using TailwindCSS to quickly build out a UI from a design spec.
  • Learned how to build out and deploy a serverless API.
  • Practiced utilizing middleware to protect my app from unauthenticated users.
  • Learned how and when to use React Server Components to render content server-side, and when client-side components are necessary.
  • Learned how to use the new React 18 Suspense component to render loading states.
  • Learned how to set up continuous deployment with CI.
  • Gained experience debugging and troubleshooting TypeScript and ESLint build errors and deployment issues.

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

(back to top)

Contact

MadeByTapperLinkedIn

Andrew Tapper - @thinktapper - andrew@tapper.codes

Project Link: https://github.com/thinktapper/projx

(back to top)

License

GNU License

Distributed under the GNU GPLv3. See LICENSE for more information.

(back to top)

About

Full-stack app using the latest versions of React (v18) and Next.js (v13)

projx.vercel.app

Topics

nextjsreacttailwindcsstypescript

Resources

Readme
GPL-3.0 license
Activity

Stars

6 stars

Watchers

1 watching

Forks

0 forks
Report repository

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
BranchesTags

Repository files navigation


Logo

A powerful tool for anyone looking to improve their productivity and manage their projects more efficiently. Whether you're a small business owner, a project manager, or a freelancer,
Projx is the missing piece in your project puzzle.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. How It's Made
  4. Optimizations
  5. Lessons Learned
  6. Contributing
  7. Contact
  8. License

About The Project

Projx is a modern project management web app developed to streamline the project management process, making it easy for users to organize and track their projects, tasks, and schedules all in one place. Users need to register to be able to access the app which allows them to easily create and manage projects, add and assign tasks, set deadlines, and track progress. Projx is designed to be user-friendly and intuitive, making it easy for users to navigate and get started quickly.

Projx.-.The.missing.piece.in.your.project.puzzle.mp4

(back to top)

Built With

  • React
  • Next
  • Prisma
  • TypeScript
  • PostgreSQL
  • tailwindcss

(back to top)

Getting Started

Instructions

Prerequisites

You’ll need to have modern versions of node.js (LTS ^16.18 recommend) and yarn or npm installed.

Installation

  1. Clone the repo 
    git clone https://github.com/thinktapper/projx.git &&cd projx
  2. Install NPM packages 
    npm install
  3. Set up the environment variables: 
    cp -v .env.example .env
  4. Open .env and enter your local or remote Postgres DB URL and JWT secret 
    DATABASE_URL=''REMOTE_DATABASE_URL=''JWT_SECRET=''
  5. Create the database schema: 
    npx prisma db push
  6. Then, run the development server:
npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

This is a Next.js project bootstrapped with create-next-app.

(back to top)


How It's Made:

This project was made using React 18 and Next.js 13. I used TailwindCSS for styling and Prisma for generating a typesafe ORM to interact with the PostgreSQL database hosted on Railway.

(back to top)

Optimizations

With time, I would like to add the following features:

  • Add a dark mode
  • Add a search bar to easily find projects and tasks.
  • Add a calendar view for easy scheduling.
  • Create profile or social pages for users.
  • Add a drag and drop feature to easily move tasks between projects.
  • Add a notification system to keep users up to date on project progress.
  • Add a changelog to keep track of project updates.
  • Add more detailed documentation.
  • Create a mobile version of the app.

See the open issues for a full list of proposed features (and known issues).

(back to top)

Lessons Learned:

This full-stack project was a great way for me to learn about the new React 18 server components and how to use the new app directory structure introduced in Next.js 13. I learned by building Projx from scratch — From design spec to deployment — Using React, Node.js, TypeScript, Postgres.

Key Takeaways:

  • Strengthened skills needed to plan, scope, research, and deploy a full-stack web app.
  • Practiced using TypeScript for better type safety and code quality.
  • Practiced using TailwindCSS to quickly build out a UI from a design spec.
  • Learned how to build out and deploy a serverless API.
  • Practiced utilizing middleware to protect my app from unauthenticated users.
  • Learned how and when to use React Server Components to render content server-side, and when client-side components are necessary.
  • Learned how to use the new React 18 Suspense component to render loading states.
  • Learned how to set up continuous deployment with CI.
  • Gained experience debugging and troubleshooting TypeScript and ESLint build errors and deployment issues.

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

(back to top)

Contact

MadeByTapperLinkedIn

Andrew Tapper - @thinktapper - andrew@tapper.codes

Project Link: https://github.com/thinktapper/projx

(back to top)

License

GNU License

Distributed under the GNU GPLv3. See LICENSE for more information.

(back to top)

About

Full-stack app using the latest versions of React (v18) and Next.js (v13)

projx.vercel.app

Topics

nextjsreacttailwindcsstypescript

Resources

Readme
GPL-3.0 license
Activity

Stars

6 stars

Watchers

1 watching

Forks

0 forks
Report repository

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
BranchesTags

Repository files navigation


Logo

A powerful tool for anyone looking to improve their productivity and manage their projects more efficiently. Whether you're a small business owner, a project manager, or a freelancer,
Projx is the missing piece in your project puzzle.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. How It's Made
  4. Optimizations
  5. Lessons Learned
  6. Contributing
  7. Contact
  8. License

About The Project

Projx is a modern project management web app developed to streamline the project management process, making it easy for users to organize and track their projects, tasks, and schedules all in one place. Users need to register to be able to access the app which allows them to easily create and manage projects, add and assign tasks, set deadlines, and track progress. Projx is designed to be user-friendly and intuitive, making it easy for users to navigate and get started quickly.

Projx.-.The.missing.piece.in.your.project.puzzle.mp4

(back to top)

Built With

  • React
  • Next
  • Prisma
  • TypeScript
  • PostgreSQL
  • tailwindcss

(back to top)

Getting Started

Instructions

Prerequisites

You’ll need to have modern versions of node.js (LTS ^16.18 recommend) and yarn or npm installed.

Installation

  1. Clone the repo 
    git clone https://github.com/thinktapper/projx.git &&cd projx
  2. Install NPM packages 
    npm install
  3. Set up the environment variables: 
    cp -v .env.example .env
  4. Open .env and enter your local or remote Postgres DB URL and JWT secret 
    DATABASE_URL=''REMOTE_DATABASE_URL=''JWT_SECRET=''
  5. Create the database schema: 
    npx prisma db push
  6. Then, run the development server:
npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

This is a Next.js project bootstrapped with create-next-app.

(back to top)


How It's Made:

This project was made using React 18 and Next.js 13. I used TailwindCSS for styling and Prisma for generating a typesafe ORM to interact with the PostgreSQL database hosted on Railway.

(back to top)

Optimizations

With time, I would like to add the following features:

  • Add a dark mode
  • Add a search bar to easily find projects and tasks.
  • Add a calendar view for easy scheduling.
  • Create profile or social pages for users.
  • Add a drag and drop feature to easily move tasks between projects.
  • Add a notification system to keep users up to date on project progress.
  • Add a changelog to keep track of project updates.
  • Add more detailed documentation.
  • Create a mobile version of the app.

See the open issues for a full list of proposed features (and known issues).

(back to top)

Lessons Learned:

This full-stack project was a great way for me to learn about the new React 18 server components and how to use the new app directory structure introduced in Next.js 13. I learned by building Projx from scratch — From design spec to deployment — Using React, Node.js, TypeScript, Postgres.

Key Takeaways:

  • Strengthened skills needed to plan, scope, research, and deploy a full-stack web app.
  • Practiced using TypeScript for better type safety and code quality.
  • Practiced using TailwindCSS to quickly build out a UI from a design spec.
  • Learned how to build out and deploy a serverless API.
  • Practiced utilizing middleware to protect my app from unauthenticated users.
  • Learned how and when to use React Server Components to render content server-side, and when client-side components are necessary.
  • Learned how to use the new React 18 Suspense component to render loading states.
  • Learned how to set up continuous deployment with CI.
  • Gained experience debugging and troubleshooting TypeScript and ESLint build errors and deployment issues.

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

(back to top)

Contact

MadeByTapperLinkedIn

Andrew Tapper - @thinktapper - andrew@tapper.codes

Project Link: https://github.com/thinktapper/projx

(back to top)

License

GNU License

Distributed under the GNU GPLv3. See LICENSE for more information.

(back to top)

About

Full-stack app using the latest versions of React (v18) and Next.js (v13)

projx.vercel.app

Topics

nextjsreacttailwindcsstypescript

Resources

Readme
GPL-3.0 license
Activity

Stars

6 stars

Watchers

1 watching

Forks

0 forks
Report repository

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content
BranchesTags

Repository files navigation


Logo

A powerful tool for anyone looking to improve their productivity and manage their projects more efficiently. Whether you're a small business owner, a project manager, or a freelancer,
Projx is the missing piece in your project puzzle.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. How It's Made
  4. Optimizations
  5. Lessons Learned
  6. Contributing
  7. Contact
  8. License

About The Project

Projx is a modern project management web app developed to streamline the project management process, making it easy for users to organize and track their projects, tasks, and schedules all in one place. Users need to register to be able to access the app which allows them to easily create and manage projects, add and assign tasks, set deadlines, and track progress. Projx is designed to be user-friendly and intuitive, making it easy for users to navigate and get started quickly.

Projx.-.The.missing.piece.in.your.project.puzzle.mp4

(back to top)

Built With

  • React
  • Next
  • Prisma
  • TypeScript
  • PostgreSQL
  • tailwindcss

(back to top)

Getting Started

Instructions

Prerequisites

You’ll need to have modern versions of node.js (LTS ^16.18 recommend) and yarn or npm installed.

Installation

  1. Clone the repo 
    git clone https://github.com/thinktapper/projx.git &&cd projx
  2. Install NPM packages 
    npm install
  3. Set up the environment variables: 
    cp -v .env.example .env
  4. Open .env and enter your local or remote Postgres DB URL and JWT secret 
    DATABASE_URL=''REMOTE_DATABASE_URL=''JWT_SECRET=''
  5. Create the database schema: 
    npx prisma db push
  6. Then, run the development server:
npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

This is a Next.js project bootstrapped with create-next-app.

(back to top)


How It's Made:

This project was made using React 18 and Next.js 13. I used TailwindCSS for styling and Prisma for generating a typesafe ORM to interact with the PostgreSQL database hosted on Railway.

(back to top)

Optimizations

With time, I would like to add the following features:

  • Add a dark mode
  • Add a search bar to easily find projects and tasks.
  • Add a calendar view for easy scheduling.
  • Create profile or social pages for users.
  • Add a drag and drop feature to easily move tasks between projects.
  • Add a notification system to keep users up to date on project progress.
  • Add a changelog to keep track of project updates.
  • Add more detailed documentation.
  • Create a mobile version of the app.

See the open issues for a full list of proposed features (and known issues).

(back to top)

Lessons Learned:

This full-stack project was a great way for me to learn about the new React 18 server components and how to use the new app directory structure introduced in Next.js 13. I learned by building Projx from scratch — From design spec to deployment — Using React, Node.js, TypeScript, Postgres.

Key Takeaways:

  • Strengthened skills needed to plan, scope, research, and deploy a full-stack web app.
  • Practiced using TypeScript for better type safety and code quality.
  • Practiced using TailwindCSS to quickly build out a UI from a design spec.
  • Learned how to build out and deploy a serverless API.
  • Practiced utilizing middleware to protect my app from unauthenticated users.
  • Learned how and when to use React Server Components to render content server-side, and when client-side components are necessary.
  • Learned how to use the new React 18 Suspense component to render loading states.
  • Learned how to set up continuous deployment with CI.
  • Gained experience debugging and troubleshooting TypeScript and ESLint build errors and deployment issues.

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

(back to top)

Contact

MadeByTapperLinkedIn

Andrew Tapper - @thinktapper - andrew@tapper.codes

Project Link: https://github.com/thinktapper/projx

(back to top)

License

GNU License

Distributed under the GNU GPLv3. See LICENSE for more information.

(back to top)

About

Full-stack app using the latest versions of React (v18) and Next.js (v13)

projx.vercel.app

Topics

nextjsreacttailwindcsstypescript

Resources

Readme
GPL-3.0 license
Activity

Stars

6 stars

Watchers

1 watching

Forks

0 forks
Report repository

Used by

Contributors

Languages