CPM Calculator Project

Live Page . Fallback Page

Table of contents

• Overview
  • Description
  • Landing Page
  • Table Modal
  • Diagram Panel
  • Gantt Chart
  • 404 Page
  • Dark Mode
  • Links
• My process
  • Built with
  • Getting Started
• Author

Overview

Description

CPM Calculator Project is a web application project built using Next.js and Tailwindcss for classes at AGH in Kraków. User can choose how many activities the diagram should consist of and, after completing the basic information, they can go to the subpage where the diagram will be displayed along with the calculated data and a Gantt chart.

Landing Page

The homepage displays an input where user can provide number of activities.

Below is a section explaining what CPM is and its benefits.

Table Modal

After opening modal user can provide sets of data to-be calculated.

Diagram Panel

If the data is completed correctly, the user will be redirected to a subpage where a diagram with the calculated information will be displayed.

Gantt Chart

After clicking the button, a modal will open, inside which the created Gantt chart will be displayed.

404 Page

If user enter incorrect data, they will be redirected to the 404 Page.

Dark Mode

This is what the Dark Mode version looks like.

Links

• Live Page
• Fallback Page

My Process

Built with

• Next.js
• TailwindCSS
• Framer Motion
• JavaScript

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

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

You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Author

• JCzyszczon - Github
• JCzyszczon - Linkedin

(back to top)