KhadijaMahanga / project-zapoint

A full stack NextJS web application that houses Jiko News and Jiko Class.

Jiko Point

Jiko Point ni jukwaa maalum na la kipekee la mtandaoni linalomilikiwa na kampuni ya Nukta Africa na kuwezeshwa na Shirika la Hivos na washirika wake kwa lengo la kuchochea matumizi ya nishati safi Tanzania. Ina vipengele vitatu ambavyo ni Jiko Class, Jiko News na Jiko Sokoni.

Accessible at https://jikopoint.co.tz

JikoPoint is a modern web stack application built using Nextjs, (javascript and a couple other helper libraries), MongoDB Databases and a headless Wordpress as a content management tool for the news sub app.

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

Tools Used

• NextJs Framework ( Static Rendering for Jiko News pages which makes use of apollo-client response from Wordpress GraphQL Server and Server-side rendering for Jiko Class pages which makes use of Next API & mongoose in middleware )
• React
• Moongose
• GraphQL (apollo-client)
• WPGraphQL for headless CMS

Getting Started with Jiko Point

Local Development

Environment Variables & Setup

Run the following to get started locally:

  # copy environment variable template to a file name .env
  cp .env.template .env
  # Edit the .env file
  yarn
  yarn dev

From the root folder, run yarn to install all dependencies, alternatively you can run npm install

$ yarn

Running the app

# watch mode
$ yarn dev

# building
$ yarn build

# running compiled
$ yarn start

Useful Scripts

In the project directory, you can run:

yarn start or yarn dev (for watch mode)

Runs the app in the development mode. Open http://localhost:3000 with your browser to see the result.

API routes can be accessed on http://localhost:3000/api. This endpoint can be edited in pages/api.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

yarn lint

Executes lint and tries to fix all fixable lint errors

yarn build

Builds the app for production to the dist folder.
It correctly bundles Server in production mode and optimizes the build for the best performance.

See the next build documentation for more details.

yarn storybook

Starts a sandbox to view all resusable components developed in the aplication. Open http://localhost:6006 with your browser to see the result.

Project Structure

.
├── LICENCE
├── README.md
├── jsconfig.json
├── next-seo.config.js
├── next.config.js
├── package.json
├── public
│   ├── favicon.ico
│   ├── fonts
│   └── styles
├── src
│   ├── assets
│   ├── components
│   ├── functions
│   ├── lib
│   ├── pages
│   ├── theme
│   └── utils
└── yarn.lock