🎨 Paletä: Unleash Your Color Creativity! 🌈

Dive into Paletä: Visit Our Website
Check Out Our Debut: Watch Our First Presentation
Server GitHub Repository: Paleta Server Repository
See Paletä in Action: Demo Video on YouTube

📚 Table of Contents 📚

• 🌟 Description
• 📁 Explanation of Files and Folders
• 💻 Tech Stack
• 📦 Dependencies
• 🚀 How to Use
• 👥 Meet the Team

🌟 Description

Welcome to Paletä, your go-to playground for all things color! Whether you're crafting digital masterpieces, spicing up design projects, or just obsessed with colors, Paletä is here to transform your visions into vibrant realities.

What Makes Paletä Special?

• Image-Based Palette Magic: Simply upload an image and behold as Paletä weaves it into a colorful tapestry of shades. Personalize your palette, play with colors, and explore formats like RGB, Hex, and CMYK. It's your creative lab!
• AI-Powered Palette Adventures: Got a concept but no picture? No worries! Describe your vision, and our AI, powered by OPENAI's magic, will craft a custom palette just for you. Your imagination is the only limit!

For Every Creator

Paletä is built for everyone - from budding artists dipping their toes in color theory to seasoned pros hunting for that perfect hue. More than just a tool, Paletä is your gateway to a world where color breathes life into ideas.

🎨 Ready to embark on a color adventure? Dive into Paletä and let the hues flow!

📖 Explanation of Files and Folders

Here's a quick guide through our project's structure:

Main Folders

• workflows: Contains our GitHub Actions workflow for automated testing.
• colour-palette: The heart of our web application, housing all crucial files.
• node_modules: Generated folder with all the npm dependencies.
• project-plan-files: Documentation related to project planning and initial stages.

Key Highlights in colour-palette

• /public: Static assets like images, referenced from the base URL.
• /src: The core of our application's code.
  • /Components: Reusable components powering our app's functionality.
  • /Pages: Different pages you can navigate within our web app.
  • /images: A collection of images used across the project.
  • App.js / App.css: The main JavaScript and CSS files for the app's UI.

Project Planning Files (project-plan-files)

• DFD.png: Data Flow Diagram for user interaction.
• Root9_Presentation_Slides.pdf: Slide deck from our first presentation.
• Root9_Project_Report.pdf: Detailed report of our initial project phase.
• Root_9 Final Timeline.pdf & .xlsx: Project timeline and schedule.
• Milestone_1_AI_Disclosure_Root_9_Taiga_Okuma_301594583.pdf: AI use disclosure document.

Final Submission Files (final-submission-files)

• Includes final presentation slides, report, and AI disclosure documents.

Files related to the server side of our website can be found in the GitHub repository linked above.

🔧 Tech stack

Frontend:

• HTML, CSS, JavaScript

Framework:

• React

External APIs:

• ColorAPI
• OpenAIAPI

🚀 How to Use

Set up the static elements of our web application with these steps. Note: AI components are not available for local setup.

In the colour-palette directory:

npm ci
npm run build

Project Structure

.
│
└── colour-palette
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── ...
    ├── src
    │   ├── images
    │   ├── Pages
    │   │   └── Tests
    │   └── Components
    │       └── Tests
    │  
    │  
    │
    └── docs
        └── ...

👥 Meet the Team

• Anna Rusinova (@arusinova)
• Stefan Pricope (@scp10sfu)
• Taiga Okuma (@SunIsDark)
• Cindy Xiao (@CindyXiao1)

Commits done on github are visible in #github-changelog on discord.