Giter VIP home page Giter VIP logo

itez-frontend's Introduction

ITEZ - Frontend

A Frontend microservice platform for a comprehensive data management of intersex and trans-persons in Zambia.

Stack

ITEZ Frontend stack composition:

  • ๐Ÿ”ฅ Next.js for Static Site Generator
  • ๐ŸŽจ Integrate with Tailwind CSS (w/ JIT mode)
  • ๐Ÿ’… PostCSS for processing Tailwind CSS and integrated to styled-jsx
  • ๐ŸŽ‰ Type checking TypeScript
  • โœ… Strict Mode for TypeScript and React 17
  • โœ๏ธ Linter with ESLint (default NextJS, NextJS Core Web Vitals and Airbnb configuration)
  • ๐Ÿ›  Code Formatter with Prettier
  • ๐ŸฆŠ Husky for Git Hooks
  • ๐Ÿšซ Lint-staged for running linters on Git staged files
  • ๐Ÿ—‚ VSCode configuration: Debug, Settings, Tasks and extension for PostCSS, ESLint, Prettier, TypeScript
  • ๐Ÿค– SEO metadata, JSON-LD and Open Graph tags with Next SEO
  • โš™๏ธ Bundler Analyzer
  • ๐Ÿ’ฏ Maximize lighthouse score
  • โ˜• Minify HTML & CSS
  • ๐Ÿ’จ Live reload
  • โœ… Cache busting
  • ๐Ÿš€ Docker for stack bootstrapping

Requirements

  • Node.js and npm

Getting started - Local development

Run the following command on your local environment:

git clone https://github.com/Digital-Prophets/itez-frontend.git
cd itez-frontend

Run with docker and docker-compose in a single command below

docker-compose up --build

The above command will build and start the frontend service with live reload enabled.

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

Or manually you will need to first install all packages

npm install

Then, you can run locally in development mode with live reload:

npm run dev

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

.
โ”œโ”€โ”€ README.md                # README file
โ”œโ”€โ”€ next.config.js           # Next JS configuration
โ”œโ”€โ”€ public                   # Public folder
โ”‚   โ””โ”€โ”€ assets
โ”‚       โ””โ”€โ”€ images           # Image used by default template
โ”œโ”€โ”€ src
โ”‚   โ”œโ”€โ”€ layout               # Atomic layout components
โ”‚   โ”œโ”€โ”€ pages                # Next JS pages
โ”‚   โ”œโ”€โ”€ styles               # PostCSS style folder with Tailwind
โ”‚   โ”œโ”€โ”€ templates            # Default template
โ”‚   โ””โ”€โ”€ utils                # Utility folder
โ”œโ”€โ”€ tailwind.config.js       # Tailwind CSS configuration
โ””โ”€โ”€ tsconfig.json            # TypeScript configuration

Deploy to production

You can see the results locally in production mode with:

$ npm run build
$ npm run start

The generated HTML and CSS files are minified (built-in feature from Next js). It will also removed unused CSS from Tailwind CSS.

To create an optimized production build of assets, run:

npm run build-prod

At this point the platform is ready to be deployed. All generated files are located at out folder, which can be deployed.

VSCode information (optional)

For VSCode, you can have a better integration with VSCode by installing the suggested extension in .vscode/extension.json. The starter code comes up with Settings for a seamless integration with VSCode. The Debug configuration is also provided for frontend and backend debugging experience.

Pro tips: if you need a project wide type checking with TypeScript, you can run a build with Cmd + Shift + B on Mac.

Everyone is welcome to contribute to the ITEZ project. Feel free to open an issue if you have question or found a bug.

License

Licensed under the MIT License, Copyright ยฉ 2021

See LICENSE for more information.


Made with โ™ฅ by Digital-Prophets

Sponsor itez

itez-frontend's People

Contributors

bupemulenga13 avatar cazterk avatar jmnda-dev avatar sikaili99 avatar sonlinux avatar

Watchers

 avatar  avatar  avatar  avatar

itez-frontend's Issues

Add agent details listing

  • Add agent details listing
  • Add agent details create action button
  • Add agent details create form
  • Add agent details edit action as per design

Add base map

  • Add base map to represent beneficiaries - MapBox
  • Add beneficiary map icon (humanoid icon)
  • Pop up meta beneficiary data on click
  • Slide right->left dashboard when beneficiary details view clicked on the pop up (this is a click option on the popup)
  • Downloadable xlsx or csv data (beneficiary)
  • Have charts and graphs to represent beneficiary metadata
  • Download report graphs as an image

Add report filtering

  • Be able to fitler data on each listing
  • Be able to download xlsx or csv format of this data

Add ccurrent application version info in footer

  • we need to intergrate bumpversion on the backend for major, minor, 'patch' and build releases bumpversion
  • we need to write this version infor to a VERSION file on the base app config path
  • we need to have an API endpoint to expose this version info
  • we need to consume this version endpoint from the frontend and tag it on the footer

Create the map base layout as per design

POTENTIAL FIRST PR

  • Add a base map for beneficiary location listing
  • Segment this from the world map to just have srid and boundaries for Zambia map

POTENTIAL SECOND PR

  • Add the beneficiaries on the map represented by heart icons
  • On click we pop up summery details for each beneficiary

POTENTIAL THIRD PR

  • Add custom map layers
  • Add clustering of beneficiaries

make user profile dynamic

  • allow update of user profile data
  • update in-place - I should be able to see existing content in the form fields before I can choose to update

Add authentication and authentication workflow

  • A user needs to first be logged in to access the system features - once logged in they should be redirected to the dashboard page
  • A user needs to have an option to log out - once logged out they should be redirected to the login page
  • the index view of the system should be set to the dashboard page
  • A new user registration action button should be available on the user listing page - and form as a pop up modal
  • A new user should be created only by an active staff or superuser for now - we will add more roles for this at a later stage - for this every user can be checked for these statuses by user.is_active, user.is_staff and user.is_superuser respectively
  • the register new user action button should only be visible to authenticated above mentioned users only

Implement custom routing

As next js has its default mechanism of assigning routes to every page

  • We can not entirely rely on that to match how we want to route various pages in the application

  • For this it will be nice to have a way to control what page is allocated which route and in what order

  • In this regard lets also take not to enforce authentication - meaning the login page should always load first if user is not authenticated

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.