ArtGen

Get what you need for your digital creatives, all in one place.

ArtGen is a collection of all your digital tools to design and build stunning softwares. Building an open source platform like this allows developers from around the world come to share their stories and ideas, while having efficient workflows.

Current Features

• Colour Palette
• Gradients
• Page Dividers
• CSS Generator
• Font Pairing
• Theme Generator

You can play a part into building this non-exhaustive list of features!

Last updated: 13 July 2023

Technologies Used

• ReactJS
• NextJS
• TailwindCSS
• Typescript
• Supabase

Contributing

Please make sure you have thoroughly read through our Contributing Guidelines and Code of Conduct for this project before contributing! You should also read about NextJS and ReactJS as they are the main development frameworks for this project.

Note: This site uses app routing, which removes the traditional pages and src dirs.

How to Run it

First, ensure you have the latest version of NodeJS installed. You can check the version by using the -v argument.

node -v

Once done, clone this repo and create a new branch in your local repository. This will isolate your work and keep the main branch clean. Use a descriptive name for your branch that reflects the nature of the changes you plan to make.

git clone <this-repo>
git checkout -b feature/your-branch-name

Now you can make your desired changes to the codebase. Whether it's adding new features, fixing bugs, or improving existing functionality, we appreciate your contributions.

Next, install the necessary packages and run the development server.

npm install
npm run dev

This should be locally hosted on http://localhost:3000.

All static media is managed in the public dir. You can easily add more content by uploading them directly in GitHub. The app dir includes the general pages of the website. Within its recursive dirs, page.tsx is the main HTML body of each page. Where necessary layout.tsx can be added to create general layouts for all of the page.tsx within that dir. Typos can also be edited directly in GitHub.

When editing, make sure to utilise components onto the page.tsx as much as possible instead of flooding the page with plain HTML. This is to improve readability and promote code reusability for other developers as well.

Important: Supabase will not allow access to the backend services due to undisclosed environment variables. Avoid modifying the backend config files (i.e. supabase/config.js, firebase/auth/*, etc.)

Developing Basic Components

All component files are located in the root/components dir. Create a new Typescript component with .tsx.

Tip: If necessary, add your components to relevant exisiting dirs or create new ones for better organisation.

export default function NewFeature() {
  return <h1>This is my new feature</h1>;
}

If you are creating multiple sub components, avoid the default keyword when exporting. This way you can ustilise multiple exports within the same <component-name>.tsx file.

export function FeatureHeader() {
  return (
   // Your component details
  )
}

export function FeatureBody() {
  return (
    <div>
      // Your component details
    </div>
  );
}

Import your new components into the page.tsx you are modifying like this.

import {
  FeatureHeader,
  FeatureBody,
} from "@/components/<component-dir>/<component-name>";

When using export default in your <component-name>.tsx, you can import without {}.

import NewFeature from "@/components/<component-dir>/<component-name>";

Styling Components

As much as possible, TailwindCSS was used to create the styling for the project to reduce compiling of CSS in globals.css.

Note the use of className for Typescript instead of the traditional class in HTML.

export default function NewFeature() {
  return (
    <div className="w-full p-10">
      <h1 className="my-10 text-center">Hello World</h1>
      <p className="text-sm">This is my feature!</p>
    </div>
  );
}

If a custom CSS is required, create a new <component-name>.module.css in the root/components/<component-name> dir.

.primary-body {
  background-color: linear-gradient(to bottom, black, red);
}
.heading {
  margin: 5px 0;
  text-align: center;
}
.subtitle {
  font-size: 5pt;
}

Import the CSS file into <component-name>.tsx.

import styles from "./<component-name>.module.css";

export default function NewFeature() {
  return (
    <div className={styles["primary-body"]}>
      {" "}
      // for class names with dashes or any other punctuation
      <h1 className={styles["heading"]}>Hello World</h1> // can also be used for
      one-word class names
      <p className={styles.subtitle}>This my feature!</p> // object usage (punctuations
      will not work here)
    </div>
  );
}

Important: Add the modules.css file into the same dir as your component.tsx file. Do not mix them up with other dirs.

Submission

Once you're satisfied with your changes, commit them to your branch with a descriptive commit message. Then, push your branch to your forked repository on GitHub.

git add .
git commit -m "Your descriptive commit message"
git push origin feature/your-branch-name

Head over to this main repository on GitHub and open a new pull request. Provide a clear title and description for your pull request, detailing the changes you've made.

Our team will review your pull request and provide feedback or suggestions if needed. We value collaboration and may engage in discussions to refine and improve your contribution. If any changes are requested during the review process, make them in your local branch, commit, and push the changes to your forked repository. The pull request will automatically update with your latest changes.

Once your pull request is approved and all changes are addressed, we will merge your contribution into the main repository. Congratulations, you are now a part of ArtGen!

If you have any questions or need assistance during the contribution process, please feel free to reach out to us. Happy contributing!

Feedback

Feel free to make general comments on the project in the Discussions page. If you would like to see something new by the community, post them in the Feature Suggestions page.

By working together, we can create an amazing platform for digital creatives. We truly appreciate your time and effort in making our project better for everyone.