The project is a digital flashcard for memorizing. A physical flashcard has a front and a back; the front poses a question, and the reverse offers the solution. A digital flashcard allows us to add images and videos to help us better remember things.<\/p>\n\n\n\n
The advantages of a flashcard are listed below.<\/p>\n\n\n\n
- \n
- It aids in enhancing visual memory.<\/li>\n\n\n\n
- It promotes learning and is portable.<\/li>\n\n\n\n
- For acronyms, mathematical formulas, algorithmic codes, etc., flashcards are instructive.<\/li>\n\n\n\n
- It’s affordable.<\/li>\n<\/ul>\n\n\n\n
See demo here<\/a>.<\/p>\n\n\n\n
<\/a>GitHub URL<\/strong><\/p>\n\n\n\n
\nhttps:\/\/github.com\/Theodore-Kelechukwu-Onyejiaku\/hackmamba-xata-cloudinary-project\n<\/div><\/figure>\n\n\n\n<\/a>Live demo<\/strong><\/p>\n\n\n\n
\nhttps:\/\/hackmamba-xata-cloudinary-project.vercel.app\n<\/div><\/figure>\n\n\n\nFrontend<\/h2>\n\n\n\n
The frontend part of our work deals with how we interact with our project as seen in the live URL shared above. Here are the tools used for the frontend.<\/p>\n\n\n\n
Frontend Tools<\/strong><\/h3>\n\n\n\n
Using the
npm i <tool_name><\/code> command, we can install them.<\/p>\n\n\n\n- \n
aos<\/strong><\/code>. This is used for the animation of cards as we scroll down the application.<\/li>\n\n\n\nreact-icons<\/strong><\/code>. This was used to display icons in our project.<\/li>\n\n\n\nreact-quill<\/strong><\/code>. This is for the WYSIWYG editor for adding front<\/strong> and back<\/strong> content.<\/li>\n\n\n\nreact-toastify<\/strong><\/code>. This was used for the toast notifications in our app.<\/li>\n\n\n\n- Tailwind CSS<\/strong>. This is the main CSS of our application. Please note that other custom CSS was used in the project. Visit the Github URL above to see all.<\/li>\n<\/ul>\n\n\n\n
Frontend Logic<\/strong><\/h3>\n\n\n\n
Here’s the logic of our application.<\/p>\n\n\n\n
- \n
- A user registers by utilizing the Credentials or Github providers (email and password). Look at the file at `pages\/auth\/signup` in the Github URL.<\/li>\n\n\n\n
- After successful registration, the user is routed to the login page `pages\/auth\/signin`.<\/li>\n\n\n\n
- After successfully logging in, the user can view all of the cards that other users have made.<\/li>\n\n\n\n
- We can choose from options like making a card, seeing our collections and cards, searching for a card based on its name or category, switching between dark and light settings, like a card, and watching a video.<\/li>\n\n\n\n
- The card name, category, image, optional video, and front and back content must all be added before a card can be created.<\/li>\n\n\n\n
- The user can begin flipping cards to practice memorizing, and films and visuals will assist them to develop their memory.<\/li>\n\n\n\n
- A user who is the card’s owner can update or delete the card once it has been created.<\/li>\n\n\n\n
- A user can add a freshly made card to their collection by clicking the Plus symbol while they are not the owner of it.<\/li>\n\n\n\n
- There are three options for editing a card. We have the option to only update the card’s image, video, or other information.<\/li>\n\n\n\n
- We can search for a card by typing its name or its category into the search box.<\/li>\n<\/ul>\n\n\n\n
Below is a High-Level Model of the frontend logic:<\/p>\n\n\n\n
![\"HLM](\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--yNWAAXgD--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800\/https:\/\/paper-attachments.dropboxusercontent.com\/s_13D9629A17BA205412E87FA69ADEF80CA77BC359F9970BA6A590DF17482B2D39_1667844528645_flashcardHLM.drawio.png\")
<\/a><\/figure>\n\n\n\nVisit the live URL above to see the application.<\/p>\n\n\n\n
\n\n\n\nBackend<\/h2>\n\n\n\n
Here’s how to install and configure Cloudinary.<\/p>\n\n\n\n
1. Install Cloudinary.<\/p>\n\n\n\n
Run this command:<\/p>\n\n\n
npm install cloudinary\n<\/code><\/span><\/pre>\n\n\n2. Create a Cloudinary account.<\/p>\n\n\n\n
We need our Cloudinary cloud name, API key, and API secret to proceed. Head over to the Cloudinary website<\/a> to get these three.<\/p>\n\n\n\n
Click the Dashboard<\/strong> tab. There, we’ll find our API key, API secret, and cloud name.<\/p>\n\n\n\n
![\"Get](\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--avZwo0oL--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800\/https:\/\/paper-attachments.dropboxusercontent.com\/s_989AA707FBDB1A6E245B0183CDBE36E7057DC650108E1558D444FCEE5091CDDF_1667441247189_Screen%2BShot%2B2022-11-03%2Bat%2B3.06.15%2BAM.png\")
<\/a><\/figure>\n\n\n\nClick Settings<\/strong>, then Upload.<\/strong> There, you can add presets.<\/p>\n\n\n\n
Give the name and folder the value “flashcard” and click Save<\/strong>.<\/p>\n\n\n\n
![\"Create](\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--Q-KAXZJR--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800\/https:\/\/paper-attachments.dropboxusercontent.com\/s_13D9629A17BA205412E87FA69ADEF80CA77BC359F9970BA6A590DF17482B2D39_1668196350401_Screen%2BShot%2B2022-11-03%2Bat%2B3.13.08%2BAM.png\")
<\/a><\/figure>\n\n\n\n3. <\/strong>Add Cloudinary details to
.env.local<\/code> file.<\/p>\n\n\n\nCreate a
.env.local<\/code> file and add the following:<\/p>\n\n\n\/\/ .env.local\nCLOUDINARY_API_KEY=<our_key<\/span>><\/span>\nCLOUDINARY_API_SECRET=<our_api_secret<\/span>><\/span>\nCLOUDINARY_NAME=<our_cloud_name<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n4. Create a Cloudinary configuration file.<\/p>\n\n\n\n
Create a folder in the root of our project called
utils<\/code>. Inside it, create a filecloudinary.js<\/code> and add the following code:<\/p>\n\n\nimport<\/span> cloudinary<\/span> from<\/span> \"cloudinary<\/span>\";\n\ncloudinary<\/span>.v2<\/span>.config<\/span>({\n cloud_name<\/span>: process.env.CLOUDINARY_NAME,\n api_key: process.env.CLOUDINARY_API_KEY,\n api_secret: process.env.CLOUDINARY_API_SECRET\n})\n\nexport<\/span> default<\/span> cloudinary<\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nInstalling and Setting Up Xata<\/strong><\/h2>\n\n\n\n
1. Create a Xata account.<\/p>\n\n\n\n
Click this link<\/a> to create a Xata account.<\/p>\n\n\n\n
2. Create a database and tables.<\/p>\n\n\n\n
If you’re new to Xata on creating tables, please read and visit these links https:\/\/xata.io\/docs\/intro\/getting-started<\/a> and https:\/\/xata.io\/docs\/quickstart\/index<\/a>. Now, create a database called “test” or “flashcard”. After that, create the following tables:<\/p>\n\n\n\n
![\"Users](\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--ACa8FUZm--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800\/https:\/\/paper-attachments.dropboxusercontent.com\/s_13D9629A17BA205412E87FA69ADEF80CA77BC359F9970BA6A590DF17482B2D39_1667831780673_Screen%2BShot%2B2022-11-07%2Bat%2B3.35.51%2BPM.png\")
<\/a>Users table<\/figcaption><\/figure>\n\n\n\n ![\"Cards](\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--wapigjKC--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800\/https:\/\/paper-attachments.dropboxusercontent.com\/s_13D9629A17BA205412E87FA69ADEF80CA77BC359F9970BA6A590DF17482B2D39_1667831850926_Screen%2BShot%2B2022-11-07%2Bat%2B3.37.12%2BPM.png\")
<\/a>Cards table<\/figcaption><\/figure>\n\n\n\n 3. Install the Xata database.<\/p>\n\n\n\n
Watch the video here<\/a> and see this installation documentation, or:<\/p>\n\n\n\n
- \n
- Install Xata CLI:<\/li>\n<\/ul>\n\n\n
npm<\/span> install<\/span> -g<\/span> @xata<\/span>\/cli\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n- \n
- Next, connect with the Xata database:<\/li>\n<\/ul>\n\n\n
xata auth login\n<\/code><\/span><\/pre>\n\n\nWe’ll choose Create a new API key in browser<\/strong> when our terminal prompts us. This opens a browser. We’ll enter the name of our API key.<\/p>\n\n\n\n
![\"Generating](\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--b3wUuT4Y--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800\/https:\/\/paper-attachments.dropboxusercontent.com\/s_13D9629A17BA205412E87FA69ADEF80CA77BC359F9970BA6A590DF17482B2D39_1668194363934_Screen%2BShot%2B2022-11-11%2Bat%2B8.19.09%2BPM.png\")
<\/a><\/figure>\n\n\n\n
- Next, connect with the Xata database:<\/li>\n<\/ul>\n\n\n
- Install Xata CLI:<\/li>\n<\/ul>\n\n\n
![\"Successful](\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--Jko7q0Gf--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800\/https:\/\/paper-attachments.dropboxusercontent.com\/s_13D9629A17BA205412E87FA69ADEF80CA77BC359F9970BA6A590DF17482B2D39_1668195045165_Screen%2BShot%2B2022-11-11%2Bat%2B8.30.27%2BPM.png\")
<\/a><\/figure>\n\n\n\n