Clow Cards

This is a cartomancy simulator which uses the Clow deck to perform divination. If you want a sneak peek on whatever the future holds for you, Clow Cards is just what you're looking for!

Table of Contents

• About
• Features
• Installation and Usage

About

The Clow Cards is a MERN stack application being developed as part of the Web Development Fundamentals subject that I'm taking during my graduation course.

MERN is an acronym to MongoDB, Express, React and Node.

Features

Meet the Cards

This page lists the Clow Cards in the deck. It has the following features:

• Filter and reorder the list (using the sidebar) based on cards characteristics, such as name or sign.
• Choose the number of cards showed per page (using the list header).
• See detailed information of each Clow Card (by clicking it).
• Search for a specific card by name (using the search bar).

Your Readings

❗ Only registered users can access this feature.

This page allows you to see the list of your card readings and to get new ones using the Clow Cards. It has the following features:

• Get a new card reading (using the upper button) with the meaning of all the selected cards available when you click on them.
• If you want, add personal comments on your card readings.

Card of the Day

This page allows you to get the Clow Card of the day. It has the following features:

• See the Clow Card of the current day.
• See detailed informations of the Clow Card of the day, including its meaning.

Installation and Usage

🔻 Before proceeding from here, make sure your system has Node.js and Yarn (or NPM) installed on it.

Clone the repository

Obviously, the first step to use the Clow Cards is cloning the repository to your device. You can do it by using the commands below (or using the GitHub interface itself).

git clone https://github.com/alvesmatheus/clow-cards.git
cd clow-cards

Configure the database

If you want a more detailed explanation on this step, read this guide.

Create a new file named .env with the same fields contained in the .env.example file. This new file will be used to set up the environment variables that will link the database with the Clow Cards application. To do this, you'll need to follow the steps below.

1. On MongoDB Atlas website, access (or create) your own account.
2. Deploy a free tier cluster on your MongoDB Atlas account.
3. Whitelist your connection IP address in this cluster (more details here).
4. Create a database user to guarantee access to your cluster (more details here).
5. On your cluster, click on Connect and then on Connect Your Application.
6. Select Node.js as your Driver and copy the given Connect String Only value.
7. On the .env file, replace this Connect String Only as the value to DATABASE_URI field.
8. If you prefer, you can replace the JWT_SECRET value with one of your preference on the .env file.

And... It's done! The Clow Cards has access to your database and you're ready to use it!

Start the application

Once the database configuration is complete, you'll need to install the dependencies. To do this, run the following command.

yarn install

After the dependencies are completely installed, you'll need to run the following command in client and server directories separately.

yarn start

Now, you just need to access your http://localhost:3000!