#Appwrite | Explore Tumblr posts and blogs

cleverhottubmiracle · 2 months ago

Link

[ad_1] In the first part of this article series, we implemented the backend with Appwrite, installed some dependencies, and set up Permit to handle authorization and role-based access control. Now let’s look at how we can integrate the frontend with the backend for a fully functional EdTech SaaS application. Frontend Integration: Implementing Authorization in Next.js Now that you have backend authorization in place using Permit, integrate it into your Next.js frontend. The frontend should: Fetch user permissions from the backend to control what users can see and do. Ensure API requests respect role-based access control (RBAC). Hide UI elements for unauthorized users (e.g., prevent students from seeing “Create Assignment”). 1. Setting up API calls with authorization Since only the backend enforces permissions, your frontend never decides access directly—instead, it: Sends requests to the backend Waits for the backend’s authorization response Displays data or UI elements accordingly To get started, you’ll need to have Node.js installed on your computer. Then, follow these steps, follow the steps below: npx create-next-app@latest frontend cd frontend 2. Initialize shadcn What you’ll observe after the creation of your Nextjs project is that Tailwind CSS v4 is installed for you right out of the box, which means you don’t need to do anything else. Because we are making use of a component library, we are going to install Shadcn UI. To do that we need to run the init command to create a components.json file in the root of the folder: After initialization, you can start adding components to your project: npx shadcn@latest add button card dialog input label table select tabs If asked, if you should use force because of the Nextjs 15 version compatibility with shadcn, hit enter to continue. 3. Install needed packages Install the following packages: npm i lucide-react zustand npm i --save-dev axios Now that we have installed all we need to build our application, we can start creating our other components and routes. To maintain UI consistency throughout the application, paste this code into your global.css file (paste it below your tailwindcss import): @layer base :root --background: 75 29% 95%; --foreground: 0 0% 9%; --card: 0 0% 100%; --card-foreground: 0 0% 9%; --popover: 0 0% 99%; --popover-foreground: 0 0% 9%; --primary: 0 0% 0%; --primary-foreground: 60 100% 100%; --secondary: 75 31% 95%; --secondary-foreground: 0 0% 9%; --muted: 69 30% 95%; --muted-foreground: 0 0% 45%; --accent: 252 29% 97%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 189 0% 45%; --input: 155 0% 45%; --ring: 0 0% 0%; --radius: 0.5rem; @layer base * @apply border-border; body @apply bg-background text-foreground; body font-family: Arial, Helvetica, sans-serif; @layer base * @apply border-border outline-ring/50; body @apply bg-background text-foreground; 4. Component files Create the following component files and paste their corresponding code: AddAssignmentDialog.tsx file: "use client" import type React from "react" import useState from "react" import Button from "@/components/ui/button" import Input from "@/components/ui/input" import Label from "@/components/ui/label" import Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, from "@/components/ui/dialog" import Assignment from "@/types" interface AddAssignmentDialogProps open: boolean onOpenChange: (open: boolean) => void onAddAssignment: (data: Assignment) => void creatorEmail: string export function AddAssignmentDialog( open, onOpenChange, onAddAssignment, creatorEmail : AddAssignmentDialogProps) const [title, setTitle] = useState("") const [subject, setSubject] = useState("") const [teacher, setTeacher] = useState("") const [className, setClassName] = useState("") const [dueDate, setDueDate] = useState("") const handleSubmit = (e: React.FormEvent) => e.preventDefault() const newAssignment = title, subject, teacher, className, dueDate, creatorEmail onAddAssignment(newAssignment) console.log("New assignment:", title, subject, class: className, dueDate, creatorEmail ) onOpenChange(false) return ( Add New Assignment Enter the details of the new assignment here. Click save when you're done. Title setTitle(e.target.value) className="col-span-3" /> Subject setSubject(e.target.value) className="col-span-3" /> Teacher setTeacher(e.target.value) className="col-span-3" /> Class setClassName(e.target.value) className="col-span-3" /> Due Date setDueDate(e.target.value) className="col-span-3" /> Save changes ) This file defines a React component, AddAssignmentDialog, which renders a dialog form for adding new assignments. It manages form state using useState and submits the assignment data to a parent component via the onAddAssignment prop. The dialog includes input fields for title, subject, teacher, class, and due date, and closes upon submission. AddStudentDialog.tsx file: 'use client' import useState from 'react' import Button from '@/components/ui/button' import Input from '@/components/ui/input' import Label from '@/components/ui/label' import Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, from '@/components/ui/dialog' import Select, SelectContent, SelectItem, SelectTrigger, SelectValue, from "@/components/ui/select" import Student from '@/types' interface AddStudentDialogProps open: boolean onOpenChange: (open: boolean) => void onAddStudent: (data: Student) => void loading: boolean creatorEmail: string export function AddStudentDialog( open, onOpenChange, onAddStudent, loading, creatorEmail : AddStudentDialogProps) const [firstName, setFirstName] = useState('') const [lastName, setLastName] = useState('') const [className, setClassName] = useState('') const [gender, setGender] = useState('') const [age, setAge] = useState("") const handleSubmit = (e: React.FormEvent) => e.preventDefault() onAddStudent( firstName, lastName, className, gender, age: Number(age), creatorEmail ) console.log('New student:', firstName, lastName, className, gender, age ) onOpenChange(false) return ( Add New Student Enter the details of the new student here. Click save when you're done. First Name setFirstName(e.target.value) className="col-span-3" /> Last Name setLastName(e.target.value) className="col-span-3" /> Class setClassName(e.target.value) className="col-span-3" /> Gender Boy Girl age setAge(e.target.value) className="col-span-3" /> loading ? "Saving..." : "Save Changes" ) This file defines a React component, AddStudentDialog, which renders a dialog form for adding new students. It manages form state using useState and submits the student data to a parent component via the onAddStudent prop. The dialog includes input fields for first name, last name, class, gender (with a dropdown), and age, and handles loading states during submission. AssignmentsTable.tsx file: import Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow from "@/components/ui/table" import type AssignmentsTable from "@/types" export function AssignmentsTables( assignments : assignments: AssignmentsTable[] ) console.log("Assignments", assignments) return ( A list of recent assignments. Title Subject Class Teacher Due Date assignments.map((assignment) => ( assignment.title assignment.subject assignment.className assignment.teacher assignment.dueDate )) ) This file defines a React component, AssignmentsTables, which renders a table to display a list of assignments. It takes an array of assignments as props and maps through them to populate the table rows with details like title, subject, class, teacher, and due date. The table includes a caption and headers for better readability. import type React from "react" interface AuthLayoutProps children: React.ReactNode title: string description?: string export function AuthLayout( children, title, description : AuthLayoutProps) return ( title description && description children Keep Your Children's Success Connect with teachers, track progress, and stay involved in your child's education journey. ) This file defines a React component, AuthLayout, which provides a layout for authentication pages. It includes a left side for forms (with a title and optional description) and a right side with a background image and motivational text. The layout is responsive, hiding the image on smaller screens. import Book, BarChart, MessageCircle from "lucide-react" const features = [ name: "Comprehensive Dashboard", description: "View student's overall academic performance, including average grades and progress over time.", icon: BarChart, , name: "Easy Communication", description: "Direct messaging system between school administrators and teachers for quick and efficient communication.", icon: MessageCircle, , name: "Academic Tracking", description: "Monitor assignments, upcoming tests, and project deadlines to help your students stay on top of their studies.", icon: Book, , ] export function Features() return ( Features Everything you need to stay connected Our platform offers a range of features designed to enhance communication between school administrators and teachers. features.map((feature) => ( feature.name feature.description )) ) This file defines a React component, Features, which showcases key platform features in a visually appealing layout. It includes a title, description, and a grid of feature cards, each with an icon, name, and detailed description. The component is designed to highlight the platform’s capabilities for school administrators and teachers. This file defines a React component, Footer, which displays a simple footer with social media icons (Facebook and Twitter) and a copyright notice. The footer is centered and responsive, with social links on the right and the copyright text on the left for larger screens. This file defines a React component, Hero, which creates a visually engaging hero section for a website. It includes a bold headline, a descriptive paragraph, and two call-to-action buttons (“Get started” and “Learn more”). The layout features a responsive design with a background shape and an image on the right side for larger screens. This file defines a React component, MobileMenu, which creates a responsive mobile navigation menu. It toggles visibility with a button and includes links to features, about, and contact sections, as well as login and sign-up buttons. The menu is styled with a clean, modern design and closes when clicking the close icon. This file defines a React component, Navbar, which creates a responsive navigation bar with links to features, about, and contact sections. It includes login and sign-up buttons for larger screens and integrates a MobileMenu component for smaller screens. The navbar is styled with a shadow and a centered layout. NotAuthorizedDialog.tsx file: This file defines a React component, NotAuthorizedDialog, which displays a dialog when a user is not authorized to perform an action. It includes a title and description prompting the user to contact an administrator, and its visibility is controlled via the open and onOpenChange props. This file defines a React component, StudentsTables, which renders a table to display a list of students. It takes an array of students as props and maps through them to populate the table rows with details like first name, last name, class, gender, and age. The table includes a caption and headers for better readability. Refer to the GitHub code for the respective code of the components mentioned above. State management and types Now for the next step, we’ll be creating the state and types we’ll be using throughout the application. Create the store and types folders in the root of the project folder. Inside the store folder, create the following files and paste the corresponding code: import create from "zustand" import persist from "zustand/middleware" interface User $id: string firstName: string lastName: string email: string interface AuthState null; setToken: (token: string export const useAuthStore = create()( persist( (set) => ( user: null, setUser: (user) => set( user ), token: null, setToken: (token) => set( token ), logout: () => set( user: null ), ), name: "auth-storage", // Persist state in localStorage ) ) This file defines a Zustand store, useAuthStore, for managing authentication state. It includes user and token states, along with methods to set the user, set the token, and log out. The state is persisted in localStorage using the persist middleware. import create from "zustand"; import persist from "zustand/middleware"; interface Profile firstName: string; lastName: string; email: string; role: string; userId: string; $id: string; $createdAt: string; interface ProfileStore null; setProfile: (profile: Profile) => void; clearProfile: () => void; export const useProfileStore = create()( persist( (set) => ( profile: null, setProfile: (profile) => set( profile ), clearProfile: () => set( profile: null ), ), name: "profile-storage", ) ); This file defines a Zustand store, useProfileStore, for managing user profile data. It includes a profile state and methods to set and clear the profile. The state is persisted in localStorage using the persist middleware. Inside the types folder, create the following file and paste the following code in the index.ts file: export interface Assignment title: string; subject: string; className: string; teacher: string; dueDate: string; creatorEmail: string; export interface AssignmentsTable extends Assignment $id: string; export interface Student firstName: string; lastName: string; gender: string; className: string; age: number; creatorEmail: string; export interface StudentsTable extends Student $id: string; This file defines TypeScript interfaces for Assignment, AssignmentsTable, Student, and StudentsTable. It extends the base Assignment and Student interfaces with additional properties like $id for database records, ensuring consistent typing across the application. Routes Now we get to see how the components and store we just created are being used in the application. Replace the code in the app/page.tsx file with the code below: import Navbar from "@/components/Navbar" import Hero from "@/components/Hero" import Features from "@/components/Features" import Footer from "@/components/Footer" export default function Home() return ( ) This file defines the main home page component, which structures the layout using Navbar, Hero, Features, and Footer components. It ensures a responsive design with a flex layout and full-page height. Create the following folders in the app folder and paste this code in their respective page.tsx files: Create a signup folder and paste this code in its page.tsx file: "use client" import useState from "react" import Link from "next/link" import useRouter from "next/navigation" import Button from "@/components/ui/button" import Input from "@/components/ui/input" import Label from "@/components/ui/label" import AuthLayout from "@/components/auth-layout" import useAuthStore from "@/store/auth" export default function SignupPage() null>(null) async function onSubmit(e: React.FormEvent) e.preventDefault(); setIsLoading(true); setError(null); const formData = new FormData(e.currentTarget as HTMLFormElement); const userData = name: `$formData.get("firstName") $formData.get("lastName")`, email: formData.get("email"), password: formData.get("password"), ; try catch (err) const error = err as Error; setError(error.message finally setIsLoading(false); return ( First name Last name Email Password error && error isLoading ? "Creating account..." : "Create account" Already have an account? Sign in ) This file defines a SignupPage component for user registration, handling form submission with validation and error handling. It uses Zustand to store user data and a token upon successful signup, then redirects to a role selection page. The form includes fields for first name, last name, email, and password, with a link to the login page for existing users. Create a role-selection folder and paste this code in its page.tsx file: "use client" import useState from "react" import useRouter from "next/navigation" import Button from "@/components/ui/button" import Card, CardContent from "@/components/ui/card" import GraduationCap, Users from "lucide-react" import useAuthStore from "@/store/auth" import useProfileStore from "@/store/profile" const roles = [ id: "Admin", title: "Admin", description: "Manage teachers, classes, and more", icon: GraduationCap, , id: "Teacher", title: "Teacher", description: "Access your class dashboard, manage grades, and communicate with students", icon: GraduationCap, , id: "Student", title: "Student", description: "Monitor your progress and communicate with teachers", icon: Users, , ] export default function RoleSelectionPage() const user, token = useAuthStore() const setProfile = useProfileStore() console.log("User:", user); const router = useRouter() const [selectedRole, setSelectedRole] = useState setLoading(true); setError(""); const payload = firstName: data.firstName, lastName: data.lastName, gender: data.gender, className: data.className, age: data.age, creatorEmail: profile?.email, ; console.log("Students payload:", payload); try const response = await fetch(API_URL_STUDENTS, method: "POST", headers: Authorization: `Bearer $token`, "Content-Type": "application/json", , body: JSON.stringify(payload), ); const result = await response.json(); console.log("Student Result", result); if (response.status === 403 && result.message === "Not authorized") setIsAddStudentDialogOpen(false); setIsNotAuthorizedDialogOpen(true); return; if (!response.ok) throw new Error(result.message catch (err) if ((err as Error & code?: number ).code === 403 && (err as Error).message === "Not authorized") setIsAddStudentDialogOpen(false); setIsNotAuthorizedDialogOpen(true); return; setError((err as Error).message); console.error("Error:", err); finally setLoading(false); ; const handleAddAssignment = async (data: Assignment) => setLoading(true); setError(""); const payload = title: data.title, subject: data.subject, className: data.className, teacher: data.teacher, dueDate: data.dueDate, creatorEmail: profile?.email, ; try const response = await fetch(API_URL_ASSIGNMENTS, method: "POST", headers: Authorization: `Bearer $token`, "Content-Type": "application/json", , body: JSON.stringify(payload), ); const result = await response.json(); if (response.status === 403 && result.message === "Not authorized") setIsAddAssignmentDialogOpen(false); setIsNotAuthorizedDialogOpen(true); return; if (!response.ok) throw new Error(result.message catch (err) if ((err as Error & code?: number ).code === 403 && (err as Error).message === "Not authorized") setIsAddAssignmentDialogOpen(false); setIsNotAuthorizedDialogOpen(true); return; setError((err as Error).message); console.error("Error:", err); finally setLoading(false); ; const handleLogout = () => clearProfile(); logout(); window.location.href = "/login"; ; return ( Welcome profile?.firstName You are logged in as profile?.role === "Admin" ? "an" : "a" profile?.role. Log out profile?.role === 'Student' ? ( ) : ( Students Assignments setIsAddStudentDialogOpen(true)>Add a Student setIsAddAssignmentDialogOpen(true)>Add Assignment ) error && error ); This file defines a TeacherDashboard component that displays a dashboard for teachers or admins, allowing them to manage students and assignments. It includes tabs for switching between students and assignments, buttons to add new entries, and handles authorization errors. The component fetches and displays data based on the user’s role, with a logout option and error handling. After creating all the files and components above and using them as I have shown you, your application should work when you run this command below: The app will be available at Test out the application now by creating a school, signing up and logging in as an admin, teacher or student, and performing some actions. Building a multi-tenant EdTech SaaS application with Next.js, Appwrite, and Permit provided several insights into authorization, security, and scalability. Here are the key takeaways: Simplified Role-Based Access Control (RBAC): With Permit, defining and enforcing admin, teacher, and student roles was straightforward. Instead of hardcoding permissions, I could dynamically manage them via the Permit UI. Permit’s tenant-aware policies ensured that schools (tenants) remained isolated from one another. This was important for data security in a multi-tenant SaaS app. Instead of writing and managing custom permission logic across dozens of API routes, Permit handled access control in a centralized way to reduce complexity and make future updates easier. Since all authorization checks were enforced at the backend, the frontend only displayed UI elements based on permissions, ensuring a smooth user experience. Implementing custom authentication from scratch could have taken weeks. But using Appwrite for authentication and Permit for authorization, I was able to focus on building core features instead of reinventing access control. Conclusion Integrating Permit with Next.js & Appwrite enabled me to simplify authorization in my multi-tenant Edtech SaaS application. By offloading complex permission logic to Permit, I was able to focus on building features, not managing access control manually. If you’re building a SaaS app with complex permissions & multi-tenancy, Permit is a great tool to use to streamline your workflow. Access the GitHub repo of the finished project for the backend here and the frontend here. [ad_2] Source link

0 notes

differenttimemachinecrusade · 2 months ago

Text

Serverless Computing Market Growth Analysis and Forecast Report 2032

The Serverless Computing Market was valued at USD 19.30 billion in 2023 and is expected to reach USD 70.52 billion by 2032, growing at a CAGR of 15.54% from 2024-2032.

The serverless computing market has gained significant traction over the last decade as organizations increasingly seek to build scalable, agile, and cost-effective applications. By allowing developers to focus on writing code without managing server infrastructure, serverless architecture is reshaping how software and cloud applications are developed and deployed. Cloud service providers such as Amazon Web Services (AWS), Microsoft Azure, and Google Cloud Platform (GCP) are at the forefront of this transformation, offering serverless solutions that automatically allocate computing resources on demand. The flexibility, scalability, and pay-as-you-go pricing models of serverless platforms are particularly appealing to startups and enterprises aiming for digital transformation and faster time-to-market.

Serverless Computing Market adoption is expected to continue rising, driven by the surge in microservices architecture, containerization, and event-driven application development. The market is being shaped by the growing demand for real-time data processing, simplified DevOps processes, and enhanced productivity. As cloud-native development becomes more prevalent across industries such as finance, healthcare, e-commerce, and media, serverless computing is evolving from a developer convenience into a strategic advantage. By 2032, the market is forecast to reach unprecedented levels of growth, with organizations shifting toward Function-as-a-Service (FaaS) and Backend-as-a-Service (BaaS) to streamline development and reduce operational overhead.

Get Sample Copy of This Report: https://www.snsinsider.com/sample-request/5510

Market Keyplayers:

AWS (AWS Lambda, Amazon S3)

Microsoft (Azure Functions, Azure Logic Apps)

Google Cloud (Google Cloud Functions, Firebase)

IBM (IBM Cloud Functions, IBM Watson AI)

Oracle (Oracle Functions, Oracle Cloud Infrastructure)

Alibaba Cloud (Function Compute, API Gateway)

Tencent Cloud (Cloud Functions, Serverless MySQL)

Twilio (Twilio Functions, Twilio Studio)

Cloudflare (Cloudflare Workers, Durable Objects)

MongoDB (MongoDB Realm, MongoDB Atlas)

Netlify (Netlify Functions, Netlify Edge Functions)

Fastly (Compute@Edge, Signal Sciences)

Akamai (Akamai EdgeWorkers, Akamai Edge Functions)

DigitalOcean (App Platform, Functions)

Datadog (Serverless Monitoring, Real User Monitoring)

Vercel (Serverless Functions, Edge Middleware)

Spot by NetApp (Ocean for Serverless, Elastigroup)

Elastic (Elastic Cloud, Elastic Observability)

Backendless (Backendless Cloud, Cloud Code)

Faundb (Serverless Database, Faundb Functions)

Scaleway (Serverless Functions, Object Storage)

8Base (GraphQL API, Serverless Back-End)

Supabase (Edge Functions, Supabase Realtime)

Appwrite (Cloud Functions, Appwrite Database)

Canonical (Juju, MicroK8s)

Market Trends

Several emerging trends are driving the momentum in the serverless computing space, reflecting the industry's pivot toward agility and innovation:

Increased Adoption of Multi-Cloud and Hybrid Architectures: Organizations are moving beyond single-vendor lock-in, leveraging serverless computing across multiple cloud environments to increase redundancy, flexibility, and performance.

Edge Computing Integration: The fusion of serverless and edge computing is enabling faster, localized data processing—particularly beneficial for IoT, AI/ML, and latency-sensitive applications.

Advancements in Developer Tooling: The rise of open-source frameworks, CI/CD integration, and observability tools is enhancing the developer experience and reducing the complexity of managing serverless applications.

Serverless Databases and Storage: Innovations in serverless data storage and processing, including event-driven data lakes and streaming databases, are expanding use cases for serverless platforms.

Security and Compliance Enhancements: With growing concerns over data privacy, serverless providers are focusing on end-to-end encryption, policy enforcement, and secure API gateways.

Enquiry of This Report: https://www.snsinsider.com/enquiry/5510

Market Segmentation:

By Enterprise Size

Large Enterprise

SME

By Service Model

Function-as-a-Service (FaaS)

Backend-as-a-Service (BaaS)

By Deployment

Private Cloud

Public Cloud

Hybrid Cloud

By End-user Industry

IT & Telecommunication

BFSI

Retail

Government

Industrial

Market Analysis

The primary growth drivers include the widespread shift to cloud-native technologies, the need for operational efficiency, and the rising number of digital-native enterprises. Small and medium-sized businesses, in particular, benefit from the low infrastructure management costs and scalability of serverless platforms.

North America remains the largest regional market, driven by early adoption of cloud services and strong presence of major tech giants. However, Asia-Pacific is emerging as a high-growth region, fueled by growing IT investments, increasing cloud literacy, and the rapid expansion of e-commerce and mobile applications. Key industry verticals adopting serverless computing include banking and finance, healthcare, telecommunications, and media.

Despite its advantages, serverless architecture comes with challenges such as cold start latency, vendor lock-in, and monitoring complexities. However, advancements in runtime management, container orchestration, and vendor-agnostic frameworks are gradually addressing these limitations.

Future Prospects

The future of the serverless computing market looks exceptionally promising, with innovation at the core of its trajectory. By 2032, the market is expected to be deeply integrated with AI-driven automation, allowing systems to dynamically optimize workloads, security, and performance in real time. Enterprises will increasingly adopt serverless as the default architecture for cloud application development, leveraging it not just for backend APIs but for data science workflows, video processing, and AI/ML pipelines.

As open standards mature and cross-platform compatibility improves, developers will enjoy greater freedom to move workloads across different environments with minimal friction. Tools for observability, governance, and cost optimization will become more sophisticated, making serverless computing viable even for mission-critical workloads in regulated industries.

Moreover, the convergence of serverless computing with emerging technologies—such as 5G, blockchain, and augmented reality—will open new frontiers for real-time, decentralized, and interactive applications. As businesses continue to modernize their IT infrastructure and seek leaner, more responsive architectures, serverless computing will play a foundational role in shaping the digital ecosystem of the next decade.

Access Complete Report: https://www.snsinsider.com/reports/serverless-computing-market-5510

Conclusion

Serverless computing is no longer just a developer-centric innovation—it's a transformative force reshaping the global cloud computing landscape. Its promise of simplified operations, cost efficiency, and scalability is encouraging enterprises of all sizes to rethink their application development strategies. As demand for real-time, responsive, and scalable solutions grows across industries, serverless computing is poised to become a cornerstone of enterprise digital transformation. With continued innovation and ecosystem support, the market is set to achieve remarkable growth and redefine how applications are built and delivered in the cloud-first era.

About Us:

SNS Insider is one of the leading market research and consulting agencies that dominates the market research industry globally. Our company's aim is to give clients the knowledge they require in order to function in changing circumstances. In order to give you current, accurate market data, consumer insights, and opinions so that you can make decisions with confidence, we employ a variety of techniques, including surveys, video talks, and focus groups around the world.

Jagney Dave - Vice President of Client Engagement

Phone: +1-315 636 4242 (US) | +44- 20 3290 5010 (UK)

#Serverless Computing Market

0 notes

vastperhaps · 8 months ago

Text

Appwrite - Build like a team of hundreds

0 notes

the2flexibleplatform · 11 months ago

Text

7 Open Source Projects You Should Know - JavaScript Edition

Overview

Hi everyone 👋🏼 In this article, I'm going to look at seven OSS repository that you should know written in JavaScript, interesting projects that caught my attention and that I want to share. Let's start 🤙🏼

1. Appwrite

Appwrite is an end-to-end backend server for Web, Mobile, Native, or Backend apps. You can easily integrate your app with user authentication, a database for storing and querying users and team data, storage and file management, image manipulation, Cloud Functions, and more services.

appwrite / appwrite

Your backend, minus the hassle.

Our Appwrite Init event has concluded. You can check out all the new and upcoming features on our Init website 🚀

Appwrite is a backend platform for developing Web, Mobile, and Flutter applications. Built with the open source community and optimized for developer experience in the coding languages you love.

English | 简体中文

Announcing Appwrite Cloud Public Beta! Sign up today!

Appwrite is an end-to-end backend server for Web, Mobile, Native, or Backend apps packaged as a set of Docker microservices. Appwrite abstracts the complexity and repetitiveness required to build a modern backend API from scratch and allows you to build secure apps faster.

Using Appwrite, you can easily integrate your app with user authentication and multiple sign-in methods, a database for storing and querying users and team data, storage and file management, image manipulation, Cloud Functions, and more services.

Find out more at: https://appwrite.io

Table of Contents:

Installation

…

View on GitHub

2. melonJS

melonJS is an HTML5 game engine that empowers developers and designers to focus on content. The framework provides a comprehensive collection of components and support for a number of third-party tools. It is an alternative to other JavaScript game engines such as Phaser 🤞

melonjs / melonJS

a fresh, modern & lightweight HTML5 game engine

melonJS 2

A fresh, modern & lightweight HTML5 game engine

melonJS 2 is a modern version of the melonJS game engine that was first released in 2011. It has been rebuilt entirely using ES6 class, inheritance and semantic, and bundled using esbuild for blazing fast build performance and provide modern features such as tree-shaking.

Note: migrating an existing project to melonJS 2 (version 10.0 and higher) will definitely break your game (ES6 semantic and inheritance, nodeJS event emitter, and no backward compatibility with deprecated legacy APIs), and you might want to read first this small step by step guide on upgrading to melonJS 2. If you are looking at the legacy version (9.x and lower) of melonJS, you can find it here under the legacy branch.

melonJS is open-source, licensed under the MIT License, and actively developed and maintained with the help of a small team of enthusiasts…

View on GitHub

3. GDevelop

GDevelop is another free, open-source game engine build from any platforms like PC or phone. The peculiarity of this game engine is that it is possible to create video games without using code, because it uses a logic system based on conditions and actions.

4ian / GDevelop

🎮 Open-source, cross-platform 2D/3D/multiplayer game engine designed for everyone.

GDevelop is a full-featured, no-code, open-source game development software. You can build games for mobile, desktop and the web. GDevelop is fast and easy to use: the game logic is built up using an intuitive and powerful event-based system.

Getting started

❔ I want to... 🚀 What to do Download GDevelop to make games Go to GDevelop website to download the app! Contribute to the editor Download Node.js and follow this README. Create/improve an extension Download Node.js and follow this README. Help to translate GDevelop Go on the GDevelop project on Crowdin or translate in-app tutorials.

Are you interested in contributing to GDevelop for the first time? Take a look at the list of good first issues, good first contributions or the "🏐 not too hard" cards on the Roadmap.

Overview of the architecture

Directory ℹ️ Description Core GDevelop core library, containing common tools to implement

…

View on GitHub

4. Egg.js

Egg.js is a simple library that allows you to easily add web easter eggs by watching the user's key strokes. It's simple to use and very funny 🤣

mikeflynn / egg.js

A simple javascript library to add easter eggs to web pages.

Egg.js

Egg.js is a simple JS library that has no prerequisites and allows you to easily add web easter eggs by watching the user's key strokes.

Example

It's really easy to use. Just include the egg.js file on the page...

(Thanks to Cloudflare for hosting the library!)

...then use the addCode() function to add in your easter eggs. You need to pass it the character sequence to trigger the easter egg callback (which can either be in plain English or Javascript key codes), a function to trigger when it happens, and an optional set of metadata. Metadata can be anything from a string to an object.

var egg = new Egg(); egg .addCode("up,up,down,down,left,right,left,right,b,a", function() { jQuery('#egggif').fadeIn(500, function()

…

View on GitHub

5. API Vault

API Vault is a beautiful project written in JavaScript: it's an online platform that works as a gateway to a world of public APIs. You can also filter the APIs by category and find the one that's right for you 🖐

Exifly / ApiVault

Your gateway to a world of public APIs.

Prerequisites • How To Use • Credits • Contributing • Support • License

Click here to submit your API

Built with

Prerequisites

Before starting to use the software make sure you have docker installed.

How To Use

Clone the repository

git clone https://github.com/exifly/ApiVault

Set .env file

Inside root repository folder rename .env.dev file

cat .env.dev > .env

Inside /frontend folder rename .env.sample file

cd frontend cat .env.dev > .env

Same action inside /backend folder

cd backend cat .env.dev > .env

Client/Server side using Docker

# Go into the root folder cd ApiVault # Run docker docker-compose up

Important note:

On first docker-compose launch, your terminal could tell you:

database_dev | 2023-05-26 13:38:01.598 UTC [83] ERROR: relation "vault_api" does not exist at character 232 database_dev | 2023-05-26 13:38:01.598 UTC [83] STATEMENT: SELECT "vault_api"."id", "vault_api"."name", "

…

View on GitHub

6. sweetalert2

sweetalert2 is a beautiful, responsive, customizable, accessible replacement for JavaScript's popup boxes without external dependencies. Primarily designed for JavaScript projects, you can integrate it with the three big frontend frameworks: Angular, React, and Vue.

sweetalert2 / sweetalert2

✨ A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies. 🇺🇦

A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.