DevelUp +

A fullstack application that allows users to create flash cards and organize them by categories. Inside each category will have a list of decks. For example, inside a Web Developer catergory there might be a deck for React and Node. Inside each deck will have a series of cards that contain questions of varying difficulties. A user can submit their answers to the questions and then the actual answer will be revealed. A user can utilize the app to see what topics they understand and what topics they need to improve on. It's time to DevelUp!

User Stories

I would like to upload a picture and display it in my profile page.
I would like to look at community made decks.
I would like to create decks and utilize them.
I would like to edit my own decks.

Deployed Link

https://cheerful-choux-1b67ff.netlify.app/category

Installation Instructions

Server-Side

Fork and clone this repository
Run npm i to install the dependencies

NPM's for Client Side

- bcrypt
- cloudinary
- cors
- dotenv
- express
- jsonwebtoken
- mongoose
- multer

Go to "https://cloudinary.com/users/register/free" to register for a cloudinary account
Once registered you should have an API Environment variable and a cloud name
Also make sure you have mongodb installed
Create a .env and store the JWT_SECRET, PORT number , MONGODB_URI, and the CLOUDINARY_URL
The file should look like:

MONGODB_URI=(mongodb://localhost/(Whatever you want your db to be called))
JWT_SECRET=(The Secret Can BE Whatever You Want)
CLOUDINARY_URL=(Your API Environemnt Variable from Cloudinary)
PORT=(Whatever Port You Want)

Also make sure to have the server running with nodemon or other means

Client-Side

Fork and clone this repository.
Run npm i to install the dependencies.

NPM's for Client Side

- axios
- jwt-decode
- react-icons
- react-router-dom
- dotenv

Inside FileUploadForm.jsx + Profile.jsx for the cloudinary images to work properly you need to change "solful" to your Cloud Name
Create a .env.local and store the server url
The file should look like:

REACT_APP_SERVER_URL=(http://localhost:(THEPORTYOUDEFINEONSERVERSIDE))

Tech Used

NodeJS
Express
React
MongoDB
CSS
Postman
Figma
Trello
Git

[noSQL] Data Model Diagram

FRONTEND ROUTES

Path	Purpose
`/`	login page
`/signup`	register page
`/profile`	profile page
`/category`	category page
`/category/:id`	decks page
`/category/:id/deck/:deckId`	cards page
`/category/:id/deck/:deckId`	edit page
`/about`	about page

BACKEND ROUTES

Method	Path	Purpose
GET	`api-v1/category`	displays all of the categories of decks
GET	`api-v1/category/:id`	displays all decks in a specific category
GET	`api-v1/category/:id/deck/:deckId`	displays the cards of a specific deck
GET	`api-v1/images`	reads all images
PUT	`api-v1/category/:id/deck/:deckId`	make changes of the cards
DELETE	`api-v1/category/:id/deck/:deckId`	deletes the whole deck and empty categories
POST	`api-v1/category`	creates a deck
POST	`api-v1/users/login`	login
POST	`api-v1/images`	create profile picture
POST	`api-v1/users/register`	register

Wireframes

Initial Planning

Final Product Images

Screenshots

MVPs

Build a frontend client using React
Build a MongoDB database of users that can be accessed to create and login users
Update profile pictures
CRUD for category, decks and cards
Login functionality
Register functionality
Logout functionality

Stretch Goals

[] Users are able to favorite their decks
[] Allow users to choose pre-sets of the difficulty level (Easy, Medium, Hard)
[] Users are able to upload images of the decks
[] Making create decks and edit cards page responsive

Code Highlights

const toggleDisplay = () => {
    setFlip(!flip)
  }

  const handleAddNum = () => {
    setFlip(false)
    setAnswer("")
    if (num >= deckData.cards.length - 1) {
      setNum(0)
    } else {
      setNum(num + 1)
    }
  }
  console.log(deckData.cards[num])

  return (
    <div className="card-master-container">
      <div style={{ position: "relative" }} className="card-container">
        <h1
          style={{
            position: "absolute",
            left: "20px",
            top: "20px",
            color: "white",
            textShadow: "0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black",
          }}
        >
          {deckData.deckName}
        </h1>
        <h1
          style={{
            position: "absolute",
            right: "20px",
            top: "10px",
            color: "white",
            textShadow: "0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black",
          }}
        >
          <p>
            {num + 1}/{deckData.cards.length}
          </p>
        </h1>
        <div>
          <div className="card-question-container">
            <p>
              {deckData.cards[num] === undefined ? "This is empty" : deckData.cards[num].question}
            </p>
          </div>
          <div className="card-user-answer">
            <input
              style={{ width: "500px", height: "50px", textAlign: "center" }}
              type="text"
              value={answer}
              onChange={(e) => setAnswer(e.target.value)}
            ></input>
          </div>
        </div>

        {flip ? (
          <div className="card-answer-container">
            <p className="question-text">
              {deckData.cards[num] === undefined ? "This is empty" : deckData.cards[num].answer}
            </p>
          </div>
        ) : (
          <div className="card-answer-ghost"></div>
        )}

        <div className="button-container">
          {!flip ? (
            <button className="card-buttons" onClick={toggleDisplay}>
              Show Answer
            </button>
          ) : (
            <button className="card-buttons" onClick={toggleDisplay}>
              Hide Answer
            </button>
          )}
          <br></br>
          <button className="card-buttons-next" onClick={handleAddNum}>
            Next Card
          </button>
        </div>
      </div>
      {currentUser.id === deckData.author ? (
        <div className="deck-admin-tools">
          <p>Deck Author Tools 🛠</p>
          <button className="edit-button" onClick={() => setShowForm(!showForm)}>
            {showForm ? "Return" : "Edit Deck"}
          </button>
          <br></br>
          <button className="delete-button" onClick={handleSubmit}>
            Delete Deck
          </button>{" "}
        </div>
      ) : (
        <></>
      )}

      {showForm ? (
        <EditDeck
          categoryId={id}
          decksId={deckId}
          category={category}
          setShowForm={setShowForm}
          showForm={showForm}
          deckData={deckData}
        />
      ) : (
        <></>
      )}
    </div>
  )
}

Reflection

Will be filled by each individual member on their own Branch

Resources

https://cloudinary.com/

jamelscott / develup-client Goto Github PK

develup-client's Introduction