12 |
13 |
69 | );
70 | };
71 | export default PasswordRecovery;
72 |
--------------------------------------------------------------------------------
/app/frontend/components/login.tsx:
--------------------------------------------------------------------------------
1 | import { route } from "@helpers/frontend/route.ts";
2 | import ErrorMessage from "./parts/error.tsx";
3 | const Login = (props: any) => {
4 | const { user, token, error } = props;
5 | if (user && token) {
6 | route({
7 | path: "/pages/dashboard",
8 | content: { user: user, token: token },
9 | })();
10 | return;
11 | }
12 | return (
13 |
14 |
68 | 15 | Reset Your Password 16 |
17 | 58 |59 | Remembered your password?{" "} 60 | 64 | Sign In 65 | 66 |
67 |
14 |
15 |
71 | );
72 | };
73 | export default Login;
74 |
--------------------------------------------------------------------------------
/app/frontend/components/parts/avatar_menu.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { route } from "@helpers/frontend/route.ts";
3 | const AvatarMenu = (props: any) => {
4 | const { user, token } = props;
5 | const [dropdownOpen, setDropdownOpen] = useState(false);
6 | return (
7 |
16 |
70 | 17 | Sign In to Your Account 18 |
19 | 60 |61 | Don't have an account?{" "} 62 | 66 | Sign Up 67 | 68 |
69 |
8 |
74 | );
75 | };
76 | export default AvatarMenu;
77 |
--------------------------------------------------------------------------------
/app/frontend/components/new_recovery_password.tsx:
--------------------------------------------------------------------------------
1 | import Loading from "./parts/loading.tsx";
2 | import { useState } from "react";
3 | import { getJSON } from "@helpers/frontend/route.ts";
4 | import SuccessMessage from "./parts/success.tsx";
5 | import ErrorMessage from "./parts/error.tsx";
6 |
7 | const NewPasswordRecovery = () => {
8 | const [loading, setLoading] = useState(false);
9 | const [successMessage, setSuccessMessage] = useState("");
10 | const [errorMessage, setErrorMessage] = useState("");
11 |
12 | return (
13 |
9 |
21 |
22 | {/* Dropdown menu */}
23 | {dropdownOpen && (
24 |
25 |
71 |
72 | )}
73 |
14 |
15 |
75 | );
76 | };
77 | export default NewPasswordRecovery;
78 |
--------------------------------------------------------------------------------
/app/backend/components/register.ts:
--------------------------------------------------------------------------------
1 | import { type BackendComponent } from "@helpers/backend/types.ts";
2 | import { checkPasswordStrength, validateEmail } from "../files/validations.ts";
3 | import { Context, NextFunc, Server, Token } from "faster";
4 | import { pbkdf2 } from "../files/pbkdf2.ts";
5 | const signupBackendComponent: BackendComponent = {
6 | before: [
7 | async (ctx: Context, next: NextFunc) => {
8 | ctx.req = new Request(ctx.req, {
9 | headers: {
10 | ...Object.fromEntries(ctx.req.headers as any),
11 | "Authorization": `Bearer token ${ctx.url.searchParams.get("token")}`,
12 | },
13 | });
14 | await next();
15 | },
16 | ],
17 | after: async (props) => {
18 | let { name, email, password, avatarUrl, token, update } = props;
19 | if (update) {
20 | try {
21 | await Token.getPayload(token as string);
22 | } catch (e: any) {
23 | props.error = "Unauthenticated user to update profile";
24 | }
25 | }
26 |
27 | props.updated = false;
28 | props.uploadedAvatar = avatarUrl || "";
29 | if (name && email) {
30 | if (!validateEmail(email as string)) {
31 | props.error = "Invalid email";
32 | }
33 | if (!name) {
34 | props.error = "Fill in the name";
35 | }
36 | const exists = (await Server.kv.get(["users", email])).value;
37 | if (update) {
38 | if (password) {
39 | props.updated = true;
40 | }
41 | if (name != exists.name) {
42 | props.updated = true;
43 | }
44 | if (email != exists.email) {
45 | props.updated = true;
46 | }
47 | if (avatarUrl != exists.avatarUrl) {
48 | props.updated = true;
49 | }
50 | if (!password) {
51 | password = exists.password;
52 | } else {
53 | if (checkPasswordStrength(password as string) < 1) {
54 | props.error = "Very weak password";
55 | }
56 | password = await pbkdf2(password as string);
57 | props.password = "";
58 | }
59 | } else {
60 | if (exists) {
61 | props.error = "User already exists";
62 | }
63 | if (checkPasswordStrength(password as string) < 1) {
64 | props.error = "Very weak password";
65 | }
66 | password = await pbkdf2(password as string);
67 | }
68 | if (!props.error) {
69 | try {
70 | await Server.kv.set(["users", email], {
71 | name: name,
72 | email: email,
73 | password: password,
74 | avatarUrl: avatarUrl,
75 | });
76 | } catch (e: any) {
77 | props.error = e.message;
78 | }
79 |
80 | // Simulate user registration logic
81 | // In a real application, save the user to a database
82 | if (!props.error) {
83 | if (props.updated) {
84 | props.message = "Updated successfully, log in again to view.";
85 | } else {
86 | props.message =
87 | `Thank you for signing up, ${name}! Please check your email (${email}) to verify your account.`;
88 | }
89 | } else {
90 | props.message = "";
91 | }
92 | }
93 | }
94 | },
95 | };
96 |
97 | export default signupBackendComponent;
98 |
--------------------------------------------------------------------------------
/app/frontend/components/parts/menu.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import AvatarMenu from "./avatar_menu.tsx";
3 | const ResponsiveMenu = (props: any) => {
4 | const { user, token } = props;
5 | const [isOpen, setIsOpen] = useState(false);
6 |
7 | // Toggle the mobile menu
8 | const toggleMenu = () => {
9 | setIsOpen(!isOpen);
10 | };
11 |
12 | // Close the mobile menu when a link is clicked
13 | const handleLinkClick = () => {
14 | if (isOpen) {
15 | setIsOpen(false);
16 | }
17 | };
18 |
19 | return (
20 |
146 | );
147 | };
148 |
149 | export default ResponsiveMenu;
150 |
--------------------------------------------------------------------------------
/app/frontend/components/parts/dashboard_summary.tsx:
--------------------------------------------------------------------------------
1 | const DashboardSummary = (props: any) => {
2 | const { data } = props;
3 | return (
4 | <>
5 | {/* Statistic Cards */}
6 |
16 |
74 | 17 | Enter your recovery code 18 |
19 | 64 |65 | Remembered your password?{" "} 66 | 70 | Sign In 71 | 72 |
73 |
7 | {/* Card 1 */}
8 |
104 | {/* Recent Activities */}
105 |
9 |
32 | {/* Card 2 */}
33 |
10 |
31 |
11 |
23 |
24 |
25 |
30 | 26 | 1,257 27 |
28 |New Users
29 |
34 |
57 | {/* Card 3 */}
58 |
35 |
56 |
36 |
48 |
49 |
50 |
55 | 51 | $24,300 52 |
53 |Total Sales
54 |
59 |
80 | {/* Card 4 */}
81 |
60 |
79 |
61 |
73 |
74 |
75 |
78 | 152
76 |Open Tickets
77 |
82 |
103 |
83 |
102 |
84 |
96 |
97 |
98 |
101 | 94%
99 |Customer Satisfaction
100 |
106 |
146 | {/* Chart Placeholder */}
147 | 107 | Recent Activities 108 |
109 |
110 |
145 |
111 |
112 |
113 |
143 |
144 | | 115 | User 116 | | 117 |118 | Activity 119 | | 120 |121 | Time 122 | | 123 |
|---|---|---|
| John Doe | 128 |Logged In | 129 |5 minutes ago | 130 |
| Jane Smith | 133 |Updated Profile | 134 |10 minutes ago | 135 |
| Bob Johnson | 138 |Made a Purchase | 139 |15 minutes ago | 140 |
148 |
157 | {/* End of dash-content */}
158 |
159 | );
160 | };
161 | export default DashboardSummary;
162 |
--------------------------------------------------------------------------------
/app/frontend/components/index.tsx:
--------------------------------------------------------------------------------
1 | import { route } from "@helpers/frontend/route.ts";
2 | import {
3 | detectedLang,
4 | useTranslation,
5 | } from "@helpers/frontend/translations.ts";
6 |
7 | const Home = () => {
8 | const t = useTranslation();
9 | return (
10 | 149 | Performance Overview 150 |
151 |
152 |
156 |
153 |
155 | [Chart Placeholder]
154 |
11 |
12 | {/* Navigation */}
13 |
33 |
34 | {/* Hero Section */}
35 |
36 |
51 |
52 | {/* Features Section */}
53 |
54 |
154 |
155 | {/* CTA Section */}
156 |
157 |
171 |
172 | {/* Footer */}
173 |
180 |
181 | );
182 | };
183 |
184 | export default Home;
185 |
--------------------------------------------------------------------------------
/app/frontend/components/register.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { route } from "@helpers/frontend/route.ts";
3 |
4 | import ErrorMessage from "./parts/error.tsx";
5 | import SuccessMessage from "./parts/success.tsx";
6 | import Loading from "./parts/loading.tsx";
7 |
8 | const Register = (props: any) => {
9 | const {
10 | name,
11 | email,
12 | password,
13 | uploadedAvatar,
14 | error,
15 | message,
16 | update,
17 | updated,
18 | token,
19 | } = props;
20 | const [loading, setLoading] = useState(false);
21 | const [frontendFomError, setFrontendFomError] = useState("");
22 | const [avatarUrl, setAvatarUrl] = useState("");
23 | const handleAvatarChange = async (e: React.ChangeEvent37 | Welcome to My SaaS App 38 |
39 |40 | Streamline your workflow and boost productivity with our all-in-one 41 | suite of tools. 42 |
43 | 48 | Get Started 49 | 50 |
55 |
153 | 56 | Powerful Features 57 |
58 |
59 | {/* Feature 1 */}
60 |
152 |
61 |
88 | {/* Feature 2 */}
89 |
62 |
87 |
63 | {/* Light Bulb Icon (Heroicons Outline) */}
64 |
78 |
79 | 80 | Intelligent Insights 81 |
82 |83 | Gain clear and actionable insights into your data, helping you 84 | make smarter decisions, faster. 85 |
86 |
90 |
122 | {/* Feature 3 */}
123 |
91 |
121 |
92 | {/* Check Badge Icon (Heroicons Outline) */}
93 |
112 |
113 | 114 | Reliable Security 115 |
116 |117 | Safeguard your data with top-notch security features and 118 | industry-leading encryption standards. 119 |
120 |
124 |
151 |
125 |
150 |
126 | {/* Chart Bar Icon (Heroicons Outline) */}
127 |
141 |
142 | 143 | Customizable Analytics 144 |
145 |146 | Tailor analytics dashboards to your needs and watch 147 | productivity soar as you track what matters. 148 |
149 |
158 |
170 | Ready to Get Started?
159 |160 | Sign up today and transform the way you work. 161 |
162 | 167 | Start Your Free Trial 168 | 169 |
50 |
51 |
66 |
67 | );
68 | } else {
69 | return (
70 |
75 | {!update && }
76 |
211 | );
212 | }
213 | };
214 | export default Register;
215 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 | 
3 |
4 |
77 | {update && (
78 |
210 | 79 | Update Profile 80 |
81 | )} 82 | {!update && ( 83 |84 | Create Your Account 85 |
86 | )} 87 | 197 | {!update && ( 198 |199 | Already have an account?{" "} 200 | 205 | Sign In 206 | 207 |
208 | )} 209 |
5 |
6 | # 🚀 **faster_react**
7 |
8 | > [!IMPORTANT]\
9 | > **Please give a star!** ⭐
10 |
11 | ---
12 |
13 | ## 🌟 Introduction
14 |
15 | `faster_react` is a tiny Full-Stack React framework. He avoids Overengineering.
16 | This framework **uses its own RSC engine, combining SSR and CSR**, and
17 | automatically generates routes for React components. To utilize this, you must
18 | use the routes helper provided by the framework
19 | ([React Router](#-react-router)). The framework's configuration file is located
20 | at `options.json`.
21 |
22 | ### 🎯 **What Does `faster_react` Do for You?**
23 |
24 | Focus solely on development! This framework handles:
25 |
26 | - 🛣️ **Automatic route generation** for React components.
27 | - 🔄 **Automatic inclusion** of new React components when
28 | `framework => "dev": true`.
29 | - 📦 **Automatic frontend bundling** when `framework => "dev": true`.
30 | - ♻️ **Automatic browser reload** when `framework => "dev": true`.
31 | - 🗜️ **Automatic frontend minification** when `framework => "dev": false`.
32 | - 🚀 **Automatic backend reload** when changes are detected and
33 | `framework => "dev": true`.
34 | - 🌐 **Automatic detection** of Deno Deploy environment. Test in other
35 | serverless environments by setting `framework => "serverless": true`.
36 |
37 | > **Note:** The project includes a simple application example demonstrating each
38 | > functionality. The example uses Tailwind CSS, but this is optional. You can
39 | > use whatever CSS framework you want.
40 |
41 | ---
42 |
43 | ### ⚡ **About Faster**
44 |
45 | This framework uses a middleware library called Faster. Faster is an optimized
46 | middleware server with an incredibly small codebase (~300 lines), built on top
47 | of native HTTP APIs with no dependencies. It includes a collection of useful
48 | middlewares:
49 |
50 | - 📄 **Log file**
51 | - 🗂️ **Serve static**
52 | - 🌐 **CORS**
53 | - 🔐 **Session**
54 | - ⏱️ **Rate limit**
55 | - 🛡️ **Token**
56 | - 📥 **Body parsers**
57 | - 🔀 **Redirect**
58 | - 🔌 **Proxy**
59 | - 📤 **Handle upload**
60 |
61 | Fully compatible with Deno Deploy and other enviroments. Examples of all
62 | resources are available in the [README](https://github.com/hviana/faster).
63 | Faster's ideology is simple: all you need is an optimized middleware manager;
64 | all other functionality is middleware.
65 |
66 | ---
67 |
68 | ## 📚 **Contents**
69 |
70 | - [⚡ Benchmarks](#-benchmarks)
71 | - [🏗️ Architecture](#%EF%B8%8F-architecture)
72 | - [📂 App Structure](#-app-structure)
73 | - [📦 Get Deno Kv and Deno Kv Fs](#-get-deno-kv-and-deno-kv-fs)
74 | - [📝 Backend API](#-backend-api)
75 | - [🧩 Backend Components](#-backend-components)
76 | - [📁 Backend Files](#-backend-files)
77 | - [🖥️ Frontend Components](#%EF%B8%8F-frontend-components)
78 | - [🎨 Frontend CSS](#-frontend-css)
79 | - [📜 Frontend Files](#-frontend-files)
80 | - [🌎 Frontend Translations](#-frontend-translations)
81 | - [🗂️ Static](#%EF%B8%8F-static)
82 | - [🧭 React Router](#-react-router)
83 | - [📦 Packages Included](#-packages-included)
84 | - [🛠️ Creating a Project](#%EF%B8%8F-creating-a-project)
85 | - [🚀 Running a Project](#-running-a-project)
86 | - [🌐 Deploy](#-deploy)
87 | - [📖 References](#-references)
88 | - [👨💻 About](#-about)
89 |
90 | ---
91 |
92 | ## ⚡ **Benchmarks**
93 |
94 | `faster_react` has only **0.9%** of the code quantity of Deno Fresh.
95 |
96 | **Benchmark Command:**
97 |
98 | ```bash
99 | # Deno Fresh
100 | git clone https://github.com/denoland/fresh.git
101 | cd fresh
102 | git ls-files | xargs wc -l
103 | # Output: 104132 (version 1.7.3)
104 |
105 | # faster_react
106 | git clone https://github.com/hviana/faster_react.git
107 | cd faster_react
108 | git ls-files | xargs wc -l
109 | # Output: 1037 (version 20.1)
110 | ```
111 |
112 | ---
113 |
114 | ## 🏗️ **Architecture**
115 |
116 | This framework utilizes **Headless Architecture** [[1]](#1) to build the
117 | application, combined with the **Middleware Design Pattern** [[2]](#2) for
118 | defining API routes in the backend.
119 |
120 | - **Headless Architecture** provides complete freedom to the developer, reducing
121 | the learning curve. Despite this freedom, there is an **explicit separation
122 | between backend and frontend**, which aids in development.
123 | - The **Middleware Design Pattern** offers a practical and straightforward
124 | method for defining API routes.
125 |
126 | 
127 |
128 | ---
129 |
130 | ## 📂 **App Structure**
131 |
132 | All application folders are inside the `app` folder.
133 |
134 | ### 📦 **Get Deno Kv and Deno Kv Fs**
135 |
136 | On the backend, if a **Deno KV** instance is available, access instances via
137 | `Server.kv` and `Server.kvFs`:
138 |
139 | ```typescript
140 | import { Server } from "faster";
141 | ```
142 |
143 | See **Deno KV** settings in `options.json`.
144 |
145 | - **Deno KV File System (`Server.kvFs`):** Compatible with Deno Deploy. Saves
146 | files in 64KB chunks. Organize files into directories, control the KB/s rate
147 | for saving and reading files, impose rate limits, set user space limits, and
148 | limit concurrent operations—useful for controlling uploads/downloads. Utilizes
149 | the Web Streams API.
150 |
151 | More details: [deno_kv_fs](https://github.com/hviana/deno_kv_fs)
152 |
153 | ---
154 |
155 | ### 📝 **Backend API**
156 |
157 | - **Imports:** Import your backend libraries here.
158 | - **Organization:** Files can be organized into subdirectories.
159 | - **File Extension:** Use `.ts` files.
160 | - **Structure:** Flexible file and folder structure that doesn't influence
161 | anything.
162 | - **Routing:** Define routes using any pattern you prefer.
163 | - **Exports:** Must have a `default export` with a function (can be
164 | asynchronous).
165 | - **Function Input:** Receives an instance of `Server` from `faster`.
166 | - **Usage:** Perform backend manipulations here (e.g., fetching data from a
167 | database), including asynchronous calls.
168 | - **Routes:** Define your custom API routes. For help, see:
169 | [faster](https://github.com/hviana/faster)
170 |
171 | ---
172 |
173 | ### 🧩 **Backend Components**
174 |
175 | - **Optionality:** A backend component is optional for a frontend component.
176 | - **Imports:** Import your backend libraries here.
177 | - **Organization:** Organize files into subdirectories.
178 | - **File Extension:** Use `.ts` files.
179 | - **Correspondence:** Each file should have the same folder structure and name
180 | as the corresponding frontend component but with a `.ts` extension.
181 |
182 | - **Example:**
183 | - Frontend: `frontend/components/checkout/cart.tsx`
184 | - Backend: `backend/components/checkout/cart.ts`
185 |
186 | - **Exports:** Must have a `default export` with an object of type
187 | `BackendComponent`:
188 |
189 | ```typescript
190 | import { type BackendComponent } from "@helpers/backend/types.ts";
191 | ```
192 |
193 | - **Usage:** Intercept a frontend component request:
194 | - **Before Processing (`before?: RouteFn[]`):** List of middleware functions
195 | (see: [faster](https://github.com/hviana/faster)). Use to check headers
196 | (`ctx.req.headers`) or search params (`ctx.url.searchParams`), like tokens,
197 | impose rate limits etc.
198 |
199 | > **Note:** To cancel page processing, do not call `await next()` at the end
200 | > of a middleware function.
201 |
202 | > **Important:** If you want the page to be processed, **do not** consume
203 | > the `body` of `ctx.req`, or it will cause an error in the framework.
204 |
205 | - **After Processing
206 | (`after?: (props: JSONObject) => void | Promise
297 | {t("index.appName", { endExample: "!" })}
298 |
299 | );
300 | };
301 | export default Home;
302 | ```
303 |
304 | In `frontend/translations/en/index.json`:
305 |
306 | ```json
307 | {
308 | "appName": "My SaaS App {{endExample}}"
309 | }
310 | ```
311 |
312 | The framework translation is just a wrapper over i18next. See the i18next
313 | documentation if you have questions.
314 |
315 | ---
316 |
317 | ### 🗂️ **Static**
318 |
319 | Files served statically. Routes are generated based on the folder and file
320 | structure.
321 |
322 | - **Example:** `localhost:8080/static/favicon.ico` matches `static/favicon.ico`.
323 |
324 | ---
325 |
326 | ## 🧭 **React Router**
327 |
328 | Since the framework has its own routing system, a third-party routing library is
329 | unnecessary. Use the framework helper:
330 |
331 | > **Note:** Direct form submissions for page routes path also work.
332 |
333 | ```typescript
334 | import { getJSON, route } from "@helpers/frontend/route.ts";
335 | ```
336 |
337 | ### **Interface Parameters:**
338 |
339 | ```typescript
340 | interface Route {
341 | headers?: Record