Skip to content

Commit 53b000c

Browse files
nikdelvinnikdelvin
committed
README.md Update
1 parent c0e1b8e commit 53b000c

File tree

2 files changed

+1808
-1384
lines changed

2 files changed

+1808
-1384
lines changed

‎README.md‎

Lines changed: 183 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,202 @@
1-
# Starlight Starter Kit: Tailwind
1+
# 📜 Scripty
22

3-
[![Built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build)
3+
> Create beautiful web apps with exemplified lessons and interactive JavaScript playgrounds
44
5-
```
6-
npm create astro@latest -- --template starlight/tailwind
5+
Practice-oriented educational platform for everyone who wants to learn JavaScript & WebDev.
6+
7+
[![Live Website](https://img.shields.io/badge/🌐_Live-scripty.by.nikdelv.in-success)](https://scripty.by.nikdelv.in)
8+
[![App](https://img.shields.io/badge/🚀_App-scripty.app.nikdelv.in-primary)](https://scripty.app.nikdelv.in)
9+
[![GitHub](https://img.shields.io/badge/GitHub-nikdelvin/scripty-blue)](https://github.com/nikdelvin/scripty)
10+
11+
## 🌟 Overview
12+
13+
Scripty is an innovative educational platform that combines:
14+
15+
- 📚 **Practice-oriented lessons** on JavaScript, Web Frameworks, and dev tools
16+
- 🎮 **Interactive coding playground** for testing your skills
17+
- 🗺️ **Tailored roadmaps** to guide you from intern to senior developer
18+
- 👥 **Community features** to connect with fellow learners
19+
20+
## ✨ Features
21+
22+
### Deep Dive into Web Development
23+
24+
Master the fundamentals and beyond:
25+
26+
- **JavaScript Language**: More than 100 practice-oriented lessons covering JS, popular Web Frameworks, libraries, and dev tools
27+
- **Framework Exploration**: 10 example projects that explain React, Next.JS, Astro.JS, Svelte, Vue.JS, Nuxt.JS & vanilla JavaScript bit by bit
28+
- **DevOps Tools**: Deep dive tutorials into command line tools and CI/CD deployment with Git, Docker, and Jenkins
29+
30+
### Interactive Learning Experience
31+
32+
Learn by doing:
33+
34+
- **Coding Playground**: Feature-rich coding playground built especially to test your skills in the most popular code practices
35+
- **Personalized Roadmaps**: Tailored roadmaps based on your goals, whether it's front-end, back-end, or full-stack development
36+
- **Community Support**: Connect with fellow learners, ask questions, share your progress, and get help from experienced devs
37+
38+
## 🗺️ Project Roadmap
39+
40+
### Phase I: Knowledge Foundation (Current)
41+
42+
JavaScript fundamentals & front-end basics:
43+
44+
- Introduction to core concepts of JavaScript including variables, data types, operators, control flow, functions & objects
45+
- Basics of HTML 5, CSS 3, and concepts of how to build basic web pages, understanding of DOM and how JavaScript interacts with it
46+
- Tailwind CSS, Bootstrap 5, Sass & PostCSS tutorials to understand advanced methods of web pages and web applications stylization
47+
48+
### Phase II: Framework Exploration (Coming Soon)
49+
50+
Fundamentals of React & other frameworks:
51+
52+
- Basics of React web framework including components, props, state & JSX. Detailed tutorial for building a simple React application
53+
- Introduction to other popular frameworks like Next.JS, Vue.JS, and Svelte. Understand their core concepts and build basic applications
54+
- 1 code project to learn how to use only vanilla JavaScript to solidify your understanding of language without relying on frameworks
55+
56+
### Phase III: Server-Side Advantage
57+
58+
Introduction to back-end with Node.JS:
59+
60+
- Lessons to explore server-side JavaScript with Node.js and learn about APIs, databases, and building a simple backend application
61+
- Basics of work with Postman, Insomnia, Swagger, and other tools for developing API documentation, back-end testing environment
62+
- Utilization tools of Scripty coding playground to practice and refine your skills with challenges such as code katas and daily tasks
63+
64+
### Phase IV: Deployment & Community
65+
66+
CI/CD setup for your first full-stack project:
67+
68+
- 10 practice-oriented lessons to learn how to automate the building, testing, and deployment of your applications using CI/CD tools
69+
- 2 code projects to learn how to combine your front-end and back-end knowledge to create and deploy a complete web application
70+
- Chats integration to give users ability to join community forums, connect with other learners, ask questions & share their projects
71+
72+
## 🛠️ Tech Stack
73+
74+
- **Framework**: [Astro](https://astro.build) - Modern static site generator
75+
- **Styling**: [Tailwind CSS](https://tailwindcss.com) - Utility-first CSS framework
76+
- **UI Library**: [TailyUI](https://tailyui.by.nikdelv.in) - Pure Tailwind CSS UI components
77+
- **Language**: TypeScript - Type-safe JavaScript
78+
- **Deployment**: Firebase Hosting
79+
80+
## 🚀 Getting Started
81+
82+
### Prerequisites
83+
84+
- Node.js (latest LTS version recommended)
85+
- npm or yarn package manager
86+
87+
### Installation
88+
89+
```bash
90+
# Clone the repository
91+
git clone https://github.com/nikdelvin/scripty.git
92+
cd scripty
93+
94+
# Install dependencies
95+
npm install
796
```
897

9-
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/starlight/tree/main/examples/tailwind)
10-
[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/starlight/tree/main/examples/tailwind)
11-
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/withastro/starlight&create_from_path=examples/tailwind)
12-
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwithastro%2Fstarlight%2Ftree%2Fmain%2Fexamples%2Ftailwind&project-name=my-starlight-docs&repository-name=my-starlight-docs)
98+
### Development
99+
100+
```bash
101+
# Start development server with linting and formatting
102+
npm run start
103+
104+
# Or just run Astro dev server
105+
npm run dev
106+
```
13107

14-
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
108+
The site will be available at `http://localhost:4321`
15109

16-
## 🚀 Project Structure
110+
### Build
17111

18-
Inside of your Astro + Starlight project, you'll see the following folders and files:
112+
```bash
113+
# Build for production (includes linting and type checking)
114+
npm run build
19115

116+
# Preview production build
117+
npm run preview
20118
```
21-
.
22-
├── public/
119+
120+
## 📁 Project Structure
121+
122+
```text
123+
scripty/
124+
├── public/ # Static assets
125+
│ └── media/ # Media files (images, videos)
126+
│ └── Farm/ # Farm-themed media assets
23127
├── src/
24-
│ ├── assets/
25-
│ ├── content/
26-
│ │ ├── docs/
27-
│ └── content.config.ts
28-
├── astro.config.mjs
29-
├── package.json
30-
├── tailwind.config.mjs
31-
└── tsconfig.json
128+
│ ├── assets/ # Project assets
129+
│ ├── components/ # React/TypeScript components
130+
│ │ ├── ASCIIRenderer/ # ASCII art renderer component
131+
│ │ ├── OpenTopoData/ # Topographic map viewer component
132+
│ │ ├── PixelGame/ # Pixel-based game component
133+
│ │ └── shared/ # Shared UI components
134+
│ │ ├── Button/ # Button component
135+
│ │ ├── Input/ # Input component
136+
│ │ └── Tablist/ # Tablist component
137+
│ ├── content/ # Content collections
138+
│ │ └── docs/ # Documentation content
139+
│ │ ├── index.mdx # Docs homepage
140+
│ │ └── guides/ # Tutorial guides
141+
│ ├── styles/ # Global styles
142+
│ │ └── global.css # Global CSS
143+
│ └── content.config.ts # Content collection configuration
144+
├── astro.config.mjs # Astro configuration
145+
├── eslint.config.mjs # ESLint configuration
146+
├── firebase.json # Firebase hosting configuration
147+
├── prettier.config.mjs # Prettier configuration
148+
├── tsconfig.json # TypeScript configuration
149+
└── package.json # Dependencies and scripts
32150
```
33151

34-
Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name.
152+
## 🎨 Available Themes
153+
154+
The website supports multiple color themes:
155+
156+
- Default
157+
- Primary
158+
- Secondary
159+
- Success
160+
- Warning
161+
- Error
162+
- Ghost
163+
164+
Access different themes via URL: `https://scripty.by.nikdelv.in/[theme-name]`
165+
166+
## 📜 Available Scripts
167+
168+
| Command | Description |
169+
| ------------------ | ------------------------------------------------------ |
170+
| `npm run start` | Formats, lints, and starts dev server |
171+
| `npm run build` | Formats, lints, type-checks, and builds for production |
172+
| `npm run preview` | Preview production build locally |
173+
| `npm run eslint` | Run ESLint on TypeScript and Astro files |
174+
| `npm run prettier` | Format all files with Prettier |
175+
176+
## 👨‍💻 Creator
177+
178+
Created by [Nikita Stadnik](https://nikdelv.in) - Passionate Fullstack Web Developer
179+
180+
- 📧 Email: [the@nikdelv.in](mailto:the@nikdelv.in)
181+
- 🐙 GitHub: [@nikdelvin](https://github.com/nikdelvin)
182+
- 💼 LinkedIn: [@nikdelvin](https://www.linkedin.com/in/nikdelvin)
183+
184+
## 🔗 Related Projects
35185

36-
Images can be added to `src/assets/` and embedded in Markdown with a relative link.
186+
- [TailyUI](https://tailyui.app.nikdelv.in) - Modern UI Library built with pure Tailwind CSS
187+
- [Brodly](https://brodly.app.nikdelv.in) - High-secure anonymous live-streaming platform
188+
- [Scientry](https://scientry.app.nikdelv.in) - Data management & visualization tool
189+
- [Feelicy](https://feelicy.app.nikdelv.in) - Mind mapping and goal planning in game format of Garden Simulator
190+
- [Neuroly](https://neuroly.app.nikdelv.in) - STT and voice synthesis AI chatbot
37191

38-
Static assets, like favicons, can be placed in the `public/` directory.
192+
## 📄 License
39193

40-
## 🧞 Commands
194+
This project is licensed under the terms specified in the [LICENSE](./LICENSE) file.
41195

42-
All commands are run from the root of the project, from a terminal:
196+
## 🤝 Contributing
43197

44-
| Command | Action |
45-
| :------------------------ | :----------------------------------------------- |
46-
| `npm install` | Installs dependencies |
47-
| `npm run dev` | Starts local dev server at `localhost:4321` |
48-
| `npm run build` | Build your production site to `./dist/` |
49-
| `npm run preview` | Preview your build locally, before deploying |
50-
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
51-
| `npm run astro -- --help` | Get help using the Astro CLI |
198+
Contributions, issues, and feature requests are welcome! Feel free to check the [issues page](https://github.com/nikdelvin/scripty/issues).
52199

53-
## 👀 Want to learn more?
200+
---
54201

55-
Check out [Starlight’s docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat).
202+
**Start your coding journey today!** 📚 Visit [scripty.app.nikdelv.in](https://scripty.app.nikdelv.in)

0 commit comments

Comments
 (0)