Skip to content

Commit 1c41026

Browse files
nikdelvinnikdelvin
committed
README.md Update
1 parent 6492749 commit 1c41026

File tree

3 files changed

+1545
-2314
lines changed

3 files changed

+1545
-2314
lines changed

‎README.md‎

Lines changed: 167 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,187 @@
1-
# Astro Starter Kit: Basics
1+
# 📜 Scripty
22

3-
```sh
4-
npm create astro@latest -- --template basics
3+
> Create beautiful web apps with exemplified lessons and interactive JavaScript playgrounds
4+
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-website.git
92+
cd scripty-website
93+
94+
# Install dependencies
95+
npm install
596
```
697

7-
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
8-
[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
9-
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
98+
### Development
1099

11-
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
100+
```bash
101+
# Start development server with linting and formatting
102+
npm run start
12103

13-
![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
104+
# Or just run Astro dev server
105+
npm run dev
106+
```
107+
108+
The site will be available at `http://localhost:4321`
14109

15-
## 🚀 Project Structure
110+
### Build
16111

17-
Inside of your Astro project, you'll see the following folders and files:
112+
```bash
113+
# Build for production (includes linting and type checking)
114+
npm run build
115+
116+
# Preview production build
117+
npm run preview
118+
```
119+
120+
## 📁 Project Structure
18121

19122
```text
20-
/
21-
├── public/
22-
│ └── favicon.svg
123+
scripty-website/
124+
├── public/ # Static assets (favicons)
23125
├── src/
24-
│ ├── components/
25-
│ │ └── Card.astro
26-
│ ├── layouts/
126+
│ ├── layouts/ # Astro layout components
27127
│ │ └── Layout.astro
28-
│ └── pages/
29-
│ └── index.astro
30-
└── package.json
128+
│ └── pages/ # Page routes
129+
│ └── [...theme].astro # Dynamic theme pages
130+
├── astro.config.mjs # Astro configuration
131+
├── tailwind.config.ts # Tailwind CSS configuration
132+
├── tsconfig.json # TypeScript configuration
133+
└── package.json # Dependencies and scripts
31134
```
32135

33-
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
136+
## 🎨 Available Themes
137+
138+
The website supports multiple color themes:
139+
140+
- Default
141+
- Primary
142+
- Secondary
143+
- Success
144+
- Warning
145+
- Error
146+
- Ghost
147+
148+
Access different themes via URL: `https://scripty.by.nikdelv.in/[theme-name]`
149+
150+
## 📜 Available Scripts
151+
152+
| Command | Description |
153+
| ------------------ | ------------------------------------------------------ |
154+
| `npm run start` | Formats, lints, and starts dev server |
155+
| `npm run build` | Formats, lints, type-checks, and builds for production |
156+
| `npm run preview` | Preview production build locally |
157+
| `npm run eslint` | Run ESLint on TypeScript and Astro files |
158+
| `npm run prettier` | Format all files with Prettier |
159+
| `npm run upgrade` | Clean install all dependencies |
160+
161+
## 👨‍💻 Creator
162+
163+
Created by [Nikita Stadnik](https://nikdelv.in) - Passionate Fullstack Web Developer
164+
165+
- 📧 Email: [the@nikdelv.in](mailto:the@nikdelv.in)
166+
- 🐙 GitHub: [@nikdelvin](https://github.com/nikdelvin)
167+
- 💼 LinkedIn: [@nikdelvin](https://www.linkedin.com/in/nikdelvin)
168+
169+
## 🔗 Related Projects
34170

35-
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
171+
- [TailyUI](https://tailyui.by.nikdelv.in) - Modern UI Library built with pure Tailwind CSS
172+
- [Brodly](https://brodly.by.nikdelv.in) - High-secure anonymous live-streaming platform
173+
- [Scientry](https://scientry.by.nikdelv.in) - Data management & visualization tool
174+
- [Feelicy](https://feelicy.by.nikdelv.in) - Mind mapping and goal planning in game format of Garden Simulator
175+
- [Neuroly](https://neuroly.by.nikdelv.in) - STT and voice synthesis AI chatbot
36176

37-
Any static assets, like images, can be placed in the `public/` directory.
177+
## 📄 License
38178

39-
## 🧞 Commands
179+
This project is licensed under the terms specified in the [LICENSE](./LICENSE) file.
40180

41-
All commands are run from the root of the project, from a terminal:
181+
## 🤝 Contributing
42182

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

52-
## 👀 Want to learn more?
185+
---
53186

54-
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
187+
**Start your coding journey today!** 📚 Visit [scripty.by.nikdelv.in](https://scripty.by.nikdelv.in)

0 commit comments

Comments
 (0)