Artistify Community Platform

A platform designed for leading digital artists around the globe to showcase their work and create an online presence for their brand. Create your portfolio, demonstrate your talent to recruiters and pave the way ahead for your bright career as an artist.

Idea behind the project

There are a lot of digital artists/game developers who are making great digital artworks,indie games, animated videos, etc. But there is a lack of platforms where they can create their portfolio, showcase their artworks and also, send their profiles to potential recruiters for job oppurtunities.

Hence, Artistify was made to enable individual artists to easily create their online portfolio, establish their brand's online presence, connect with other fellow community members and pave a way for their great career as an artist.

Demo

Live hosted link: Site Link

Projct Demo link: Demo Link

Dev Tools/Technologies

The app includes many characteristic features:

• Client side code written in React
• Node and Express used for server side code.
• MongoDB Atlas is used for being fast, scalable, and document based database.
• Seamless content creation using Firebase Storage engine.
• JWT Authentication to securely signin in and avail the services as a registered user.
• Reset / Forgot / Lost password retrieval system.
• Nodemailer used for template based emails for reset-password and signup.
• Implemented Lazy-loading to optimize component and image loading.
• Added Route-based Code Splitting for reducing js-bundle size on app loading.
• Redux is used for proper state management in the client side.
• Api request handled using axios
• Form fields managed using React-Hook-Form.
• Tailwind CSS, utility for rapid styling using classes.
• Used React-easy-crop package to enable image cropping/scaling feature.
• react-toastify is used for sounding alerts and error management.
• SVG icons referred from react-icons.
• Server-side deployed on Heroku.
• React SPA deployed on Netlify.

App Screenshots

Color Reference

Color	Hex
Light Blue	#13aff0
Dark Black	#171717
Slate Green	#10b981

Environment Variables

To run this project, you will need to add the following environment variables to your .env file in the server directory

DATABASE_CONNECTION_URL

JWT_TOKEN_KEY

GMAIL_APP_PASSWORD

GMAIL_APP_USER

PORT

Installation

Follow the steps to setup a developement environment for this app:

• Clone this repo. Use the command, or simple download the zip file for code

  git clone https://github.com/Kawaljeet2001/Artistify-Community-Platform.git

• Setting up server dependencies

  cd ./server
  yarn install or npm install

• Create .env file and add in all the environment variables

• Setting up client dependencies

  cd ./client
  yarn install or npm install

• Starting the dev servers

  cd ./client
  yarn start

  
  cd ./server
  nodemon server or npm start

• You'll also need to create a MongoDB Atlas Cluster and add the database connection url in the env variables