https://github.com/greisp-dev/welcomekit

A two-part application with a "Welcome Kit" viewer and a separate CRUD "Generator" tool to manage content, built with vanilla JavaScript.
https://github.com/greisp-dev/welcomekit

crud crud-application-in-javascript css3 frontend html5 i18n javascript json portfolio-project single-page-app vanilla-js welcome-kit

Last synced: 3 months ago
JSON representation

A two-part application with a "Welcome Kit" viewer and a separate CRUD "Generator" tool to manage content, built with vanilla JavaScript.

• Host: GitHub
• URL: https://github.com/greisp-dev/welcomekit
• Owner: greisp-dev
• Created: 2025-06-11T20:53:35.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2025-06-11T23:17:28.000Z (4 months ago)
• Last Synced: 2025-06-25T05:45:04.107Z (3 months ago)
• Topics: crud, crud-application-in-javascript, css3, frontend, html5, i18n, javascript, json, portfolio-project, single-page-app, vanilla-js, welcome-kit
• Language: JavaScript
• Homepage: https://greisp-dev.github.io/WelcomeKit/
• Size: 161 KB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          

# Welcome Kit - Dynamic Content Manager

A lightweight, two-part application built with **vanilla JavaScript**. It includes:

-   A **public-facing "Welcome Kit"** to display a list of links.

    

-   A **Generator tool** with full **CRUD** functionality to manage content.

    

What began as a simple static HTML page has evolved into a complete content management system—**without relying on any external frameworks**.

📦 **[View Live Demo](https://greisp-dev.github.io/WelcomeKit/)**

----------

## 📌 About the Project

This project was created to streamline onboarding by organizing useful links for new employees. Originally developed as a static HTML/CSS page, it was difficult to update and maintain.

To solve this, the project was redesigned as a dynamic, two-part application:

-   A **viewer** to display organized content.

    

-   A **content generator** to manage and update data through a friendly UI.

    

The goal was to build a maintainable, modern tool using only front-end web fundamentals.

----------

## ✨ Features

-   **Dynamic Content**  

    Loads data from an external `cards-data.json` file for easy updates without modifying the source code.

    

-   **App-like Experience**  

    Fixed header/footer and internal scroll area for a clean, responsive interface.

    

-   **Smooth Animations**  

    CSS keyframe animations provide smooth transitions (fade-in/fade-out).

    

-   **Full CRUD Support** via the Generator:

    

    -   **Create** new sections and links via the UI.

        

    -   **Read**: Live preview of content as you edit.

        

    -   **Update** titles and links using inline forms.

        

    -   **Delete** sections or links with confirmation prompts.

        

-   **Bilingual Interface (i18n)**  

    Instantly switch between English and Portuguese in the Generator tool.

    

-   **Data Import/Export**  

    Easily manage the link database by importing/exporting JSON files.

    

----------

## 🛠 Tech Stack

Built entirely with web fundamentals—no frameworks.

-   HTML5

    

-   CSS3 (Flexbox, Keyframe Animations)

    

-   JavaScript (ES6+)

    

-   JSON

    

----------

## 🚀 Getting Started

To run the project locally:

### Clone the repository 

`git clone https://github.com/greisp-dev/WelcomeKit.git` 

### Navigate to the project folder  

` cd WelcomeKit` 

### 🔍 View the Viewer

Open `index.html` in your browser.

### 🧰 Use the Generator Tool

Open `WelcomeKitGenerator/WelcomeKitGenerator.html` in your browser.

> ℹ️ For full functionality (especially `fetch` and JSON I/O), it's recommended to run the project using a live server like the **Live Server** extension in VS Code.

----------

## 📄 License

This project is open source and available under the MIT License.