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
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. How It's Made
4. Optimizations
5. Lessons Learned
   • Key Takeaways
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

• 
• 
• 
• 
• 
• 

(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

Andrew Tapper - @thinktapper - andrew@tapper.codes

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

(back to top)

License

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

(back to top)