Skip to content

Commit 969aa6e

Browse files
DefinetlyNotAIDefinetlyNotAI
committed
Add 'Website_Error_Examples/' from commit '30d224f1378fbf0a7a0c70247cd47ac8e9b260af'
git-subtree-dir: Website_Error_Examples git-subtree-mainline: e3f958b git-subtree-split: 30d224f
2 parents e3f958b + 30d224f commit 969aa6e

39 files changed

+6220
-0
lines changed

‎Website_Error_Examples/LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2025 Shahm Najeeb
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎Website_Error_Examples/README.md‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
# 🌐 Vite + React Error Page System
2+
3+
A **production-ready**, **responsive**, and **elegant error page system** built with **Vite**, **React**, and **TypeScript**. Designed to handle various HTTP error codes with style and clarity, this system ensures users stay informed and engaged even when things go wrong.
4+
5+
---
6+
7+
## 🚀 Core Features
8+
9+
- ✅ Prebuilt pages for common HTTP errors:
10+
- 404 (Not Found)
11+
- 403 (Forbidden)
12+
- 401 (Unauthorized)
13+
- 500 (Internal Server Error)
14+
- 502 (Bad Gateway)
15+
- ...and more
16+
- 🎯 Interactive navigation to preview each error page
17+
- 🖼️ Custom illustrations and animations tailored to each error type
18+
- 📚 Descriptive error messages with friendly, actionable guidance
19+
- 🔁 "Back to Home" buttons for smoother recovery
20+
- 🔍 Filter/search to quickly jump to any error code
21+
- 📱 Fully responsive for mobile, tablet, and desktop
22+
23+
---
24+
25+
## 🎨 Design System
26+
27+
- 🧼 **Minimalist Aesthetic** – Clean lines, ample whitespace, and simple iconography
28+
- 📦 **8px Grid System** – Consistent rhythm across layouts
29+
- 🌈 **Color Palette** – Soft blue primary, orange accents, and modern neutral tones
30+
- 🖋️ **Typography** – Sans-serif font with 3 weights, accessible sizing, and hierarchy
31+
- 🌀 **Illustrations** – Custom abstract, geometric representations of each error
32+
- ✨ **Subtle Animations** – Smooth page transitions and feedback effects
33+
- 🪞 **Shadows & Rounding** – Elegant touches for a polished UI
34+
35+
---
36+
37+
## 🛠️ Tech Stack
38+
39+
- **Vite** – Lightning-fast build & dev tooling
40+
- **React** – Declarative, component-driven UI
41+
- **TypeScript** – Strong typing for scalability and safety
42+
- **ESLint (Flat Config)** – Linting with `@typescript-eslint`, `react-hooks`, and `react-refresh`
43+
- **CSS Modules / Tailwind / SCSS** (customizable) – Clean styling with theme support
44+
45+
---
46+
47+
## 📦 Getting Started
48+
49+
```bash
50+
git clone https://github.com/DefinetlyNotAI/Website_Error_Examples
51+
cd Website_Error_Examples
52+
npm install
53+
npm run dev
54+
````
55+
56+
---
57+
58+
## 🧪 Scripts
59+
60+
| Command | Description |
61+
| ----------------- | -------------------------- |
62+
| `npm run dev` | Start Vite dev server |
63+
| `npm run build` | Build for production |
64+
| `npm run preview` | Preview built site locally |
65+
| `npm run lint` | Run ESLint (Flat Config) |
66+
67+
---
68+
69+
## 💡 Customization
70+
71+
* Easily add new error codes: just create a new component under `src/pages/errors/` as well as the animation in `src/components/Illustrations`
72+
* Swap out illustrations with your own assets or animated SVGs
73+
* Use Tailwind, SCSS, or CSS Modules based on your stack preference
74+
* Extend ESLint config via `eslint.config.js` using flat config structure
75+
76+
---
77+
78+
## 📄 License
79+
80+
MIT — Free to use and adapt for personal or commercial projects.
81+
82+
---

‎Website_Error_Examples/eslint.config.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import js from '@eslint/js';
2+
import globals from 'globals';
3+
import reactHooks from 'eslint-plugin-react-hooks';
4+
import reactRefresh from 'eslint-plugin-react-refresh';
5+
import tseslint from 'typescript-eslint';
6+
7+
export default tseslint.config(
8+
{ ignores: ['dist'] },
9+
{
10+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11+
files: ['**/*.{ts,tsx}'],
12+
languageOptions: {
13+
ecmaVersion: 2020,
14+
globals: globals.browser,
15+
},
16+
plugins: {
17+
'react-hooks': reactHooks,
18+
'react-refresh': reactRefresh,
19+
},
20+
rules: {
21+
...reactHooks.configs.recommended.rules,
22+
'react-refresh/only-export-components': [
23+
'warn',
24+
{ allowConstantExport: true },
25+
],
26+
},
27+
}
28+
);

‎Website_Error_Examples/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Error Pages Template</title>
8+
<meta name="description" content="Beautiful and functional error pages for your website" />
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
12+
</head>
13+
<body>
14+
<div id="root"></div>
15+
<script type="module" src="/src/main.tsx"></script>
16+
</body>
17+
</html>

0 commit comments

Comments
 (0)