SushiJS

SushiJS, is a Typescript, NextJS, TailwindCSS with Framer Framework based on Agile, new revolutionary and evolved folder "modular" structure, developed in a week (1 week exactly) by the Harvard University student of Project Management, Miguel Gargallo, @miguelgargallo. ITAMAESAN ORG is an Open Source Code Foundation, leading in the development industry based on Agile and Project Management Methodologies applied to developments.

SushiJS is a Typescript, NextJS, TailwindCSS and Motion Framer project to help developers build great tools!

✨ We are proud to announce, ITAMAESAN, a project to help developers, exclusive working with Open Source MIT License on our code.

✨ ITAMAESAN は、オープンソースの MIT ライセンスで開発する開発者を支援するプロジェクトです。

Project Organizer

• Main Features
• Agile in NextJS
• NRNx2 Agile by ITAMAESAN
• Project Management System
• Features
• Why NRNx2
• HowTo
• Directories
• NRNx2 Agile
• npm
• Support
• License
• We run on
• Fix

Main Features

✨ Typescript
📘 NextJS
🌗 CSS
😶‍🌫️ Framer Motion
🦄 Favicons
📱 Responsive Nav
🍱 Easy, git clone & npm install/run
🎉 Folder organized structure

• Back to top 🔼

Agile in NextJS

First we would have to draw 4 column system.

🧠 Backlog | 👷 In Progress | ✅ Publish | 🎯 Review

Once you put the tasks on the board, you can see the order of the tasks from: 🧠 Backlog > 👷 In Progress > ✅ Publish > 🎯 Review and then, once you ended to code that component, as obviusly, you will need to develop the next one, so you return to 🧠 Backlog > 👷 In Progress > ✅ Publish > 🎯 Review with the new component, and one after one, repeatit until you have all the components done. Then to upgrade components or add new components, you can just move the component to the next folder, and the order of the imports will be added susbecuencely the enumerations.

The second main feature of The SushiJS Framework is the ability to create components that are reusable but not necessarily general for all the pages. This is the reason why we have created the "uncommon" folder. This folder is part of the framework, and it is an extra way create components that are not general for all the pages. It contains, the same strcuture until you navigate to the "elements" folder, and the order of the imports is customizable 100% by the developer.

For example: src/uncommon/components/elementsbypage/Home src/uncommon/components/elementsbypage/AboutUs src/uncommon/components/elementsbypage/ContactUs src/uncommon/components/elementsbypage/Menu

Inside this folders you will encounter a basic folder:

- 00 Header
- 01 Head
- 02 Body
- 03 Footer

In every page, that is the reason why we have created the "uncommon" folder, it is not a folder you will use everyday, it's uncommonly to use, but is there in case you need for example, to create a specific component, for a specific page for: testing purpouse, SEO or a specific component as mentioned before, like a custome menu.

• Back to top 🔼

NRNx2 Agile by ITAMAESAN

SuhsiJS introduced the NRNx2 Agile subsystem folder structure and development methodology.

This is the first main aspects of SushiJS, here you will find out a Project Management System, a simple and easy to use system to manage your folders.

• Back to top 🔼

Project Management System

It's based on Agile methodology, it's a system to manage your projects and tasks.

• Back to top 🔼

Features

Directories are the main feature of this system, you can create, delete, rename and move directories, but always under a precise level of numerical identification. The following identification levels are available: 00 Header 01 Head 02 Body 03 Footer

Inside those directories, you will encounter a second independent system of enumeration, this system is called the NRNx2 Agile, introduced by Miguel Gargallo, a software engineer student and a project manager. He studied at Harvard University and is the main developer at SushiJS.

• Back to top 🔼

Why NRNx2

NRN means NextJS Right Now, and x2 means the addition of SushiJS Agile, a Numerical Reference Number, or NRN, is a system to manage the numerical identification of the directories.

• Back to top 🔼

HowTo

01: 🍚, Cook rice. <- Prepare all your pages.
02: 🧂, Mix Vinegar, Oil, Sugar & Salt.
03: ⏲,  Cook until sugar is dissolved.
04: 🥣, Stir into rice.
05: 🐟, Prepear fillings.
06: ⬛️, Put Nori on a bamboo mat.
07: ⬜️, Put rice with hands.
08: 🔲, Spride rice over the nori.
09: 🥓, Lay the filling.
10: 🎋, Roll the bamboo mat and press.
11: 🔪, Cut with wet knife.
12: 🍣, Enjoy!

12 (real), 13, 14 and 15 steps above are optional.

Take a look into the following directory structure:

• Back to top 🔼

Directories

🍣 SUSHIJS FRAMEWORK
🔪---fonts
🔪---lib
🔪---public
▒   🎋---fonts
▒   🎋---static
▒       🥓---favicons
🔪---src
▒   🎋---app
▒   ▒   🥓---components
▒   ▒   ▒   🔲---GlobalStyles
▒   ▒   🥓---styles
▒   🎋---common
▒   ▒   🥓---components
▒   ▒   ▒   🔲elements
▒   ▒   ▒       ⬜️---00 Header
▒   ▒   ▒       ▒   ⬛️---00 Meta
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 Meta.tsx
▒   ▒   ▒       ⬜️---01 Head
▒   ▒   ▒       ▒   ⬛️---01 Menu
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 Sushisho.tsx
▒   ▒   ▒       ▒   ⬛️---02 SecondaryMenu
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 Sushiten.tsx
▒   ▒   ▒       ▒   ⬛️---03 MenuNotAnimated
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 SushishoUsed.tsx
▒   ▒   ▒       ▒   ⬛️---04 SecondaryMenuNotAnimated
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 SushitenUsed.tsx
▒   ▒   ▒       ▒   ⬛️---05 ToggleDarkModeButton
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 Izakaya.tsx
▒   ▒   ▒       ⬜️---02 Body
▒   ▒   ▒       ▒   ⬛️---06 WelcomeDescriptionText
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 Bento.tsx
▒   ▒   ▒       ▒   ⬛️---07 CardsProps
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 Arubamu.tsx
▒   ▒   ▒       ▒   ⬛️---08 AboutUsImages
▒   ▒   ▒       ▒   ⬛️---09 BrandImages
▒   ▒   ▒       ▒       🐟-----🧂 logo1.png
▒   ▒   ▒       ▒       🐟-----🧂 logo2.png
▒   ▒   ▒       ▒       🐟-----🧂 logo3.png
▒   ▒   ▒       ▒   ⬛️---10 Container
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 Container.tsx
▒   ▒   ▒       ▒   ⬛️---12 OurServices
▒   ▒   ▒       ▒   ⬛️---13 CardsPropsImproved
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 ShashinArubamu.tsx
▒   ▒   ▒       ▒   ⬛️---14 OurServicesText
▒   ▒   ▒       ▒   ⬛️---15 Bottom
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 Bottom.tsx
▒   ▒   ▒       ▒   ⬛️---16 Appbar
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 Appbar.tsx
▒   ▒   ▒       ▒   ⬛️---17 BigText
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 BigText.tsx
▒   ▒   ▒       ▒   ⬛️---18 BigTextExport
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 BigTextExport.tsx
▒   ▒   ▒       ▒   ⬛️---20 Section
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 Section.tsx
▒   ▒   ▒       ▒   ⬛️---21 Page
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 Page.tsx
▒   ▒   ▒       ▒   ⬛️---22 Carrousel
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 Carrousel.tsx
▒   ▒   ▒       ▒   ⬛️---22 CarrouselCards
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 Carrousel.tsx
▒   ▒   ▒       ▒   ⬛️---23 CoolError404
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 CooltError.tsx
▒   ▒   ▒       ▒   ⬛️---24 CoolError404Exporter
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 Arubamu.tsx
▒   ▒   ▒       ⬜️---03 Footer
▒   ▒   ▒       ▒   ⬛️---25 Footer
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 Footer.tsx
▒   ▒   🥓---hooks
▒   ▒   🥓---types
▒   ▒   🥓---utils
▒   🎋---modules
▒   ▒   🥓---auth
▒   ▒       🔲---api
▒   ▒       🔲---components
▒   🎋---pages
▒       🥓---api
▒           🔲---authAPI
▒           🔲---helloAPI
▒   🎋---uncommon
▒   ▒   🥓---components
▒   ▒   ▒   🔲elementsbypage
▒   ▒   ▒       ⬜️---01 Home
▒   ▒   ▒       ▒   ⬛️---00 Header
▒   ▒   ▒       ▒   ⬛️---01 Head
▒   ▒   ▒       ▒   ⬛️---02 Body
▒   ▒   ▒       ▒   ⬛️---03 Footer    
▒   ▒   ▒       ⬜️---02 404
▒   ▒   ▒       ▒   ⬛️---00 Header
▒   ▒   ▒       ▒   ⬛️---01 Head
▒   ▒   ▒       ▒   ⬛️---02 Body
▒   ▒   ▒       ▒   ⬛️---03 Footer    
🔪---static
▒   🎋---favicons
🔪---styles

• Back to top 🔼

NRNx2 Agile

Between 00 Header and 01 Head there is no main difference at all. The only difference is the order of the imports internally. When you navigate to 02 Body, you will see that the order of the imports is a continuation of the order of the imports in 00 Header, and not a reset of the order in every directory. If you delete the main folders: - 00 Header - 01 Head - 02 Body - 03 Footer

More precisely, the following files are exported:

▒   ▒   ▒       ⬜️---00 Header
▒   ▒   ▒       ▒   ⬛️---00 Meta
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 Meta.tsx
▒   ▒   ▒       ⬜️---01 Head
▒   ▒   ▒       ▒   ⬛️---01 Menu
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 Sushisho.tsx
▒   ▒   ▒       ▒   ⬛️---02 SecondaryMenu
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 Sushiten.tsx
▒   ▒   ▒       ▒   ⬛️---03 MenuNotAnimated
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 SushishoUsed.tsx
▒   ▒   ▒       ▒   ⬛️---04 SecondaryMenuNotAnimated
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 SushitenUsed.tsx
▒   ▒   ▒       ▒   ⬛️---05 ToggleDarkModeButton
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 Izakaya.tsx
▒   ▒   ▒       ⬜️---02 Body
▒   ▒   ▒       ▒   ⬛️---06 WelcomeDescriptionText
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 Bento.tsx
▒   ▒   ▒       ▒   ⬛️---07 CardsProps
▒   ▒   ▒       ▒       🐟-----🥣 index.ts
▒   ▒   ▒       ▒       ⏲-----🍚 Arubamu.tsx
▒   ▒   ▒       ▒   ⬛️---08 AboutUsImages
▒   ▒   ▒       ▒   ⬛️---09 BrandImages
▒   ▒   ▒       ▒       🐟-----🧂 logo1.png
▒   ▒   ▒       ▒       🐟-----🧂 logo2.png
▒   ▒   ▒       ▒       🐟-----🧂 logo3.png

And move all directories to the root of the elements project folder, you will see that the order of the imports is functional too. The system is developed to be easy for non relates heavy developers, or also called head of areas, or project managers Who know the basis of the programming skills, but do not know the order of the imports or projects specifications at all. This also enables a way to order tasks as the Agile Scrum Manifesto states.

• Back to top 🔼

Getting started

⬇️ git clone https://github.com/itamaesanorg/SushiJS.git
🔄 npm install
➡️ npm run dev
✨ Enjoy

• Back to top 🔼

npm

npm i @itamaesanorg/sushijs


⬜⬜⬜⬜⬜⬜⬜🟧🟧🟧⬜🟧🟧⬜🟧🟧⬜🟧🟧⬜⬜⬜⬜
⬜⬜⬜⬜⬜🟧🟧🟧🟧⬜🟧🟧⬜🟧🟧⬜🟧🟧⬜🟧🟧🟧⬜
⬜⬜⬜⬜🟧⬜🟧🟧⬜🟧🟧⬜🟧🟧⬜🟧🟧⬜🟧🟧⬜🟧🟧
🟧🟧⬜🟧⬜🟧🟧⬜🟧🟧⬜🟧🟧⬜🟧🟧⬜🟧🟧⬜🟧🟧🟧
🟧🟧🟧🟧🟧🟧⬜🟧🟧⬜🟧🟧⬜🟧🟧⬜🟧🟧⬜🟧🟧⬜🟧
⬜🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧⬜🟧🟧
⬜🟧🟧🟧⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜🟧🟧🟧⬜
🟧🟧🟧⬜⬛⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜⬜⬛⬜⬜⬜
🟧🟧⬜⬜⬛⬜⬛⬛⬜⬜⬜⬜⬜⬜⬜⬜⬛⬛⬜⬛⬜⬜⬜
⬜⬜⬜⬜⬛⬜⬜⬜⬜⬜⬛⬜⬜⬛⬜⬜⬜⬜⬜⬛⬜⬜⬜
⬜⬜⬜⬜⬛⬜🟪🟪⬜⬜⬛⬛⬛⬛⬜⬜🟪🟪⬜⬛⬜⬜⬜
⬜⬜⬜⬜⬛⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬛⬜⬜⬜
⬜⬜⬜⬜⬜⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬜⬜⬜⬜

• Back to top 🔼

Support

🐣 Twitter: https://twitter.com/itamaesanorg
🌐 Homepage: https://itamaesan.org redirects to https://SushiJS.com

• Back to top 🔼

License

⚖️ MIT at: https://github.com/itamaesanorg/SushiJS/blob/main/LICENSE

• Back to top 🔼

We run on

Vercel 🍣 Thanks Vercel if you read that!

• Back to top 🔼

Fix

😍 Before dealing with the deploy please take while to read this for 100% optimization.
[Here are posible steps before](https://github.com/itamaesanorg/edu)

• Back to top 🔼