KurocoNext

Deployed at : SushiPedia

Sushipedia is like an encyclopedia for Sushi. This site would serve as a manual for incoming foreigners in Japan. The main purpose of creating this site was to get familiar with NextJS and different features of Kuroco and leave all the logic and functionality to the backend and stick to mostly just rendering the components on frontend.

Frontend : NextJS, TailwindCSS

Backend : Kuroco

Preview

Features

• Kuroco Filter query : Search by generating an API endpoint for filtered results based on entered keywords

• Kuroco Dynamic image conversion : Render different image sizes across the site with lossless quality

• Kuroco Tags : Add multiple tags to different items and then filter by tags by the tags API endpoint

• Kuroco Custom Function : Created a custom endpoint for searching by category_type_nm which is currently not available by Kuroco

• Kuroco Files : Storing and rendering content for Category Settings of a content list

• Kuroco API : Configuring multiple custom endpoints for fetching results

• Kuroco Pagination : Distributing data responses over multiple pages for scalability and faster fetching without much load on the server

Installation

Requirements

• Node.js :14.x
• Yarn :1.15.x

Steps to run locally

git clone https://github.com/VortexExpansion/KurocoNext.git
cd KurocoNext
yarn install 
yarn dev

Congratulations! Your project will be hosted locally at http://localhost:3000/homePage/

For building the project

yarn build

Kuroco Configuration

• Sign up for Kuroco's free trial
• Integrate your cloned repo to Kuroco by following this documentation
• Go to your Kuroco Management Page and select Default from API dropdown. Then choose Import as a new API from the given radio buttons and upload the exported_api.yaml folder from the original repository.

Testing

An E2E testing environment has been set up using Cypress

yarn add cypress
open cypress

To write custom tests for the website, configure E2E testing from cypress and modify the cypress/e2e/spec.cy.js file. Follow this documentation for reference.

Content Structure

The content structure has only one component Sushi List and all the information is nested inside it and can be accessed through the content list editor menu under Category settings and Related tags.

graph TD;
    X{All Sushi} -->|/rcms-api/3/fetchSushi - Model:Topics| A[Sushi Item];
    A-->|/rcms-api/3/categories - Model : TopicsCategory| B[Category Settings];
    A-->|/rcms-api/3/tags - Model : Tag| C[Tags];
    B-->D[Dropdown category];
    C-->E[Tag 01];
    C-->F[Tag 02];

Loading

Documentation for backend

• Add new Sushi

Select Sushi List from Content Dropdown menu, then on the top right corner of the screen click on Add

Select the Category from dropdown and enter the Title. Also enter other non-required information below if you want to

Choose or Add a new Tag and then finally click on Add to submit the data

On reloading the website, you can now view the newly added Sushi

• Define custom functions using Kuroco Smarty

Select Function from Operation dropdown menu, then on the top right corner of the screen click on Add

Set the Title preferably by the name of the endpoint it is pointing to. Choose the Category from the dropdown menu and set the Identifier which is the unique identifier on which you want to perform your operation

Inside the Process field, type the commands that you want to perform and click on Add/Update. The language here is Kuroco Smarty, refer this documentation