📜 Scripty

Create beautiful web apps with exemplified lessons and interactive JavaScript playgrounds

Practice-oriented educational platform for everyone who wants to learn JavaScript & WebDev.

🌟 Overview

Scripty is an innovative educational platform that combines:

• 📚 Practice-oriented lessons on JavaScript, Web Frameworks, and dev tools
• 🎮 Interactive coding playground for testing your skills
• 🗺️ Tailored roadmaps to guide you from intern to senior developer
• 👥 Community features to connect with fellow learners

✨ Features

Deep Dive into Web Development

Master the fundamentals and beyond:

• JavaScript Language: More than 100 practice-oriented lessons covering JS, popular Web Frameworks, libraries, and dev tools
• Framework Exploration: 10 example projects that explain React, Next.JS, Astro.JS, Svelte, Vue.JS, Nuxt.JS & vanilla JavaScript bit by bit
• DevOps Tools: Deep dive tutorials into command line tools and CI/CD deployment with Git, Docker, and Jenkins

Interactive Learning Experience

Learn by doing:

• Coding Playground: Feature-rich coding playground built especially to test your skills in the most popular code practices
• Personalized Roadmaps: Tailored roadmaps based on your goals, whether it's front-end, back-end, or full-stack development
• Community Support: Connect with fellow learners, ask questions, share your progress, and get help from experienced devs

🗺️ Project Roadmap

Phase I: Knowledge Foundation (Current)

JavaScript fundamentals & front-end basics:

• Introduction to core concepts of JavaScript including variables, data types, operators, control flow, functions & objects
• Basics of HTML 5, CSS 3, and concepts of how to build basic web pages, understanding of DOM and how JavaScript interacts with it
• Tailwind CSS, Bootstrap 5, Sass & PostCSS tutorials to understand advanced methods of web pages and web applications stylization

Phase II: Framework Exploration (Coming Soon)

Fundamentals of React & other frameworks:

• Basics of React web framework including components, props, state & JSX. Detailed tutorial for building a simple React application
• Introduction to other popular frameworks like Next.JS, Vue.JS, and Svelte. Understand their core concepts and build basic applications
• 1 code project to learn how to use only vanilla JavaScript to solidify your understanding of language without relying on frameworks

Phase III: Server-Side Advantage

Introduction to back-end with Node.JS:

• Lessons to explore server-side JavaScript with Node.js and learn about APIs, databases, and building a simple backend application
• Basics of work with Postman, Insomnia, Swagger, and other tools for developing API documentation, back-end testing environment
• Utilization tools of Scripty coding playground to practice and refine your skills with challenges such as code katas and daily tasks

Phase IV: Deployment & Community

CI/CD setup for your first full-stack project:

• 10 practice-oriented lessons to learn how to automate the building, testing, and deployment of your applications using CI/CD tools
• 2 code projects to learn how to combine your front-end and back-end knowledge to create and deploy a complete web application
• Chats integration to give users ability to join community forums, connect with other learners, ask questions & share their projects

🛠️ Tech Stack

• Framework: Astro - Modern static site generator
• Styling: Tailwind CSS - Utility-first CSS framework
• UI Library: TailyUI - Pure Tailwind CSS UI components
• Language: TypeScript - Type-safe JavaScript
• Deployment: Firebase Hosting

🚀 Getting Started

Prerequisites

• Node.js (latest LTS version recommended)
• npm or yarn package manager

Installation

# Clone the repository
git clone https://github.com/nikdelvin/scripty-website.git
cd scripty-website

# Install dependencies
npm install

Development

# Start development server with linting and formatting
npm run start

# Or just run Astro dev server
npm run dev

The site will be available at http://localhost:4321

Build

# Build for production (includes linting and type checking)
npm run build

# Preview production build
npm run preview

📁 Project Structure

scripty-website/
├── public/                     # Static assets (favicons)
├── src/
│   ├── layouts/                # Astro layout components
│   │   └── Layout.astro
│   └── pages/                  # Page routes
│       └── [...theme].astro    # Dynamic theme pages
├── astro.config.mjs            # Astro configuration
├── tailwind.config.ts          # Tailwind CSS configuration
├── tsconfig.json               # TypeScript configuration
└── package.json                # Dependencies and scripts

🎨 Available Themes

The website supports multiple color themes:

• Default
• Primary
• Secondary
• Success
• Warning
• Error
• Ghost

Access different themes via URL: https://scripty.by.nikdelv.in/[theme-name]

📜 Available Scripts

Command	Description
npm run start	Formats, lints, and starts dev server
npm run build	Formats, lints, type-checks, and builds for production
npm run preview	Preview production build locally
npm run eslint	Run ESLint on TypeScript and Astro files
npm run prettier	Format all files with Prettier
npm run upgrade	Clean install all dependencies

👨‍💻 Creator

Created by Nikita Stadnik - Passionate Fullstack Web Developer

• 📧 Email: the@nikdelv.in
• 🐙 GitHub: @nikdelvin
• 💼 LinkedIn: @nikdelvin

🔗 Related Projects

• TailyUI - Modern UI Library built with pure Tailwind CSS
• Brodly - High-secure anonymous live-streaming platform
• Scientry - Data management & visualization tool
• Feelicy - Mind mapping and goal planning in game format of Garden Simulator
• Neuroly - STT and voice synthesis AI chatbot

📄 License

This project is licensed under the terms specified in the LICENSE file.

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

---

Start your coding journey today! 📚 Visit scripty.by.nikdelv.in