Skip to content

How to install

Prerequisites

Nodejs

To check if Node.js is already installed, use the following command. If it is not installed, follow the instructions on the Node.js website to install it.

node -v

Cloudinary

Create an Account

Free plan limitations

Create a free tier account with Cloudinary.

Create a Folder in Media Library

Media library folder

In the Cloudinary media library, create a folder that will contain all your images. Use the folder name as the value for the cldMainFolder variable in /utils/cloudinary/cloudinaryMainFolder.js.

Allow Access to Resource List

The image carousel on the view album page uses the Product Gallery Cloudinary widget. The widget requires access to the “Resource List” to find all resources by album-name tag. This is a prerequisite for using the Product Gallery widget. For more information, see prerequisite_make_sure_client_side_asset_lists_are_enabled.

Allow resource list prerequisite
Allow resource list settings

Use Default Upload Presets

This app only works with signed uploads. Do not enable unsigned uploads and leave the default upload presets. For more information, see unsigned uploads


Do not use unsigned uploads

Cloudinary Environment Variables

MongoDB

Create An Account

Create a free account with MongoDB Atlas.

Create a Cluster and Database

Create shared cluster

Create a shared cluster with a provider of your preference and a region near you.

Create database and cluster

Then, create a database within the cluster.

Create Database User

Under Database Access, create a database user with read and write access.

Network Access

Under Network Access, allow access from your local IP address.

Connection String

Open connection to db

To find your connection string, go to database —> Connect..

Connect to application using drivers

Select connection using Drivers.

Connection string

Make a note of the DATABASE_URI which you will need to set up your environment variables.

Installation

Clone the Repository

Clone this repository using the following command:

git clone https://github.com/rauf-dev/jtwenty.git

Then, install the dependencies listed in the package.json file by running the following command:

npm install

Set Up Environment Variables

Create a file named .env in the root directory of your project. Add environment-specific variables on new lines in the format NAME=VALUE. Set the following environment variables in the .env file:

CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
DATABASE_URI=your_database_uri_more_info_from_mongodb_atlas_under_connection_string

Usage

To run the app locally, navigate to your project folder and run the following command in the root directory:

npm run start
gif showing terminal window with npm run start command

Watch the terminal for connection status or errors and the localhost port number (4000 by default).

In your browser, go to http://localhost:4000 to access the app. Use the menu to create or delete albums, upload images, and view albums.

For detailed instructions on how to use the app, refer to the Features for details on how to use the app.