Temporarily Only compatible with
Google Chrome
Table of Contents
Hyper Ninja is professionally engineered Full-stack MERN app , that ensures your servers deployed on Render or any other deployment service stay awake and running effortlessly.
Third party deployment servers put each deployed server to sleep (idle state),after 14 minutes of non-usage. This can lead to 30-40 seconds loading time, when the server is in idle state.
In comparison each server that is registered in hyper ninja will be up and running with less than 0.5 second loading time.
* Registered Servers Stay Active, As long as the user is logged in to his account and Hyper Ninja app is opened in a browser tab.
Empowering users with an array of advanced functionalities. Explore dynamic dashboards, personalized profile management, and more. Discover how these features redefine user interaction:
-
Responsive Expandable Sidebar Offering a seamless Navigation and intuitive user experience.
-
Light and Dark modes,to optimize visual comfort in diverse environments.
-
A dynamic dashboard efficiently presents subscribed servers, featuring essential details and user-friendly on/off toggles.
-
Complete Server Configuration Page: Users can exercise full control over server settings through a profile page, featuring CRUD operations and an integrated logger screen.
-
User-Centric Profile Management: The user profile page facilitates personalized control with CRUD options, including secure password modification and Account Delete.
-
The app has many Ui Ux features to make it more user-friendly and also comfy to use.
-
Employing secure cookies, caching, and automatic data refetching, the app ensures data security and optimized performance.
Usage is very Simple but First small setup for each server is required.
This Usage Guide is for NodeJs Express server, But every server (no matter which programmming language) works on Hyper Ninja, as long as it has a Get Request with the below JSON OBJECT as Response with Endpoint matches the registered endpoint in hyper ninja account.
Each registered server, must have simple endpoint setup. With it's help Hyper Ninja can keep the server Active, this endpoint is going to handle a GET Request and return this object as JSON Response:
{
"success": true,
"data": "revived"
}* There is Two Different Server setup Methods (Simple & Advanced), to choose from:
I. Open the Entry point file (server.js / index.js) of the server-side code ,
II. COPY and PASTE this in your entry point file:
app.get("/reviver", (_, res) =>
res.status(200).json({ success: true, data: "revived" })
);I.open the Entry point file (server.js / index.js) of the server-side code ,
II.COPY and PASTE this in your entry point file:
app.get("/reviver", (_, res) =>
setTimeout(
() => res.status(200).json({ success: true, data: "revived" }),
5000
)
);
app.get("*", (_, res) =>
res.status(404).json({ success: false, data: "Endpoint doesn't exist" })
);- The SetTimeout, provides a better user experience and also gurantees that the server is Activated and functioned for a fixed amount of time , which increase the Hyper Ninja server's Revivng-Mechanism efficiency.
- The
"*"GLOBAL ENDPOINT, gives Error handling advantage , where the Hyper Ninja server’s Logger will warn you if the Error is caused by incorrect endpoint.
- A) First Register or Login To Your Account
- B) Finally After successful Registeration/Login, you will be Redirected to Your Dashboard Page.
=> Simply Click NEW on the uppper right side of the dashboard => then provide your server’s Name and Url
=> Then after the server is successfully registered it will appear in the dashboard ,
=> Clicking on the server’s Dashboard Row , redirects to the Server’s Profile Page, where all the Server’s settings and Error Logger are.
Remember to keep Hyper Ninja open in The Browser and Logged-in for the server to stay Up & Running.
Check The Usage-Guide Video Tutorial for a step-by-step walkthrough, and set up your registered server with ease.
Built upon a foundation of 100% TypeScript 🔵, both the frontend and backend of The Application showcase a cohesive and dynamic technology stack.
- React Vite (Typescript) ⚛️🚀
- Redux ToolKit as state manager 👔
- Redux ToolKit Query as data fetching and caching tool 🔗
- 100% Pure CSS 🎨
- React-router-dom with
createBrowserRouter()🧭
-
NodeJS ExpressJS (Typescript) 🟢🚀
-
Leveraging MongoDB for data storage 🗄️
-
Mongoose for efficient object modeling 🏢🔍
-
User Auth System 🔐:
I. JSON Web Token (JWT) for secure authentication 🎫🔒
II. Cookies with HTTP-only and server-side access for enhanced security 🍪
III. Password Hashing with bcrypt Package 🔑
-
cors() with credentials and strict origin 🔄
-
ENV Configured ⚙️
-
ExpressJS AsyncHandler 🔧
-
Error Handler
⚠️
hyper_ninja_app/--------------------🟢 The Github Repository
│
├─📂 client/------------------------🟢 Contains the Client-side React Code
│ │
│ ├─📂 public/---------------------🟢 Contains the Logo Svg files
│ │ │
│ │ ├─📄 LOGO_Images
│ ├─📂 src/------------------------🟢 Contains the Logo Svg files
│ │ │
│ │ ├─📂 app /--------------------🟢 Redux Tool Kit Store & Hooks
│ │ │
│ │ ├─📂 components/--------------🟢 React Components Used across the App
│ │ │
│ │ ├─📂 features/----------------🟢Redux Tool Kit Slices
│ │ │
│ │ ├─📂 hooks/-------------------🟢Custom Build React Hooks
│ │ │
│ │ ├─📂 layouts/-----------------🟢User-area Sidebar Layout
│ │ │
│ │ ├─📂 pages/-------------------🟢Main Page Components
│ │ │
│ │ ├─📂 styles/------------------🟢 Styles used all across the app
│ │ │
│ │ ├─📂 types/-------------------🟢 Type script types and Interfaces
│ │ │
│ │ ├─📄 App.tsx------------------🟢 The main app component
│ │ │
│ │ ├─📄 Main.tsx-----------------🟢Entry point for the React App
│
├─📂 src /--------------------------🟢constains the server side Node Code
│ │
│ ├─📂 api/
│ │ │
│ │ ├─📂 url/---------------------🟢 Self Contained Component for Handling registered Servers
│ │ │ |
│ │ │ ├─🗄 registered servers----🟢 (📄controllers, 📄model, 📄routes and 📄services files)
│ │ │ |
│ │ ├─📂 user/--------------------🟢 Self Contained Component for registered Handling Users
│ │ │ |
│ │ ├─🗄 users-----------------🟢 (📄controllers, 📄model, 📄middlewares, 📄routes
│ │ and 📄services files)
│ │
│ ├─📂 config/---------------------🟢 Configuration files
│ │ │
│ │ ├─📄 db.ts--------------------🟢 Conmtains Mongo Db connecting function
│ │ │
│ │ ├─📄 config.env---------------🟢 Contains All ENV Secrets (is refrenced in .gitignore)
│ │
│ ├─📂 middlewares/
│ │ ├─📄 errorHandler.ts----------🟢global errorHandler
│ │ │
│ │ ├─📄 authMiddleWare.ts--------🟢User Authentication Middleware
│ │
│ ├─📂 utils/
│ │ │
│ │ ├─📄 constants.ts------------ 🟢ENV constants
│ │
│ ├─📄 routes.ts-------------------🟢The Main Api Router
│ │
│ ├─📄 server.ts-------------------🟢Entry Point for the Server
- well as a practical person , who goes by logic and "action & reaction" principle , css was a big challenge for me actually styling and designing in general are not my thing , but i decided to prove to myself that i am capable of doing it , because at the end working with css can sometimes be frustrating , but its not hard .
- Using Redux ToolKit as both state manager also as (caching & fetching) tool was a really good decision, it helped a lot, when exactly to call each http request, with automatic refetching and recaching Tags. Also its ability to provide ready to use current request status(loading, error, success...) makes building and maintaining a user friendly app with rich ui and ux much easier .
- Learning Typescript wasn't easy , either hard i would rather describe it as challenging and needs dedication. But after learning it, i think it is a "must" for each junior Web Dev, Typescript is very powerful and helped me a lot maintaing my project and make it very scalable.
The Hardest challenge i had while building a Completly out of the box project is the infrstructure of the project and how to engineer it to have a full closed secure cycle with 100% scalability and functionality.
For Example :
- When to call each Server ,
- how should the response be like ,
- how to handle the server if it is in idle state or active state ,
- how to behave with the cached data if a user performs any action like changing url data logging in or out ,
- Client and Server Side Routing systems
- what about many error varaities , how to show the user his errors ,
- how to authorize the userarea , how to add delete cookies .
- How to properly handle chaching after each CRUD operation
- how to securly handle , changing the user Password or delete user account and many more .
In Conclusion the Questions of When and how to do the Operations or the Manipulations did take more of my time building this project rather than, code writing ,runtime errors or learning & coding with typescript.