Giter Club home page Giter Club logo

Comments (4)

rkotchamp avatar rkotchamp commented on June 29, 2024

Hey i am interested in this react project. Do you mind telling me more

from dolphin-flashcard-app.

jacob-macleod avatar jacob-macleod commented on June 29, 2024

Great @rkotchamp!
The react frontend and the python backend are two different codebases. The URL which the frontend uses to communicate with the API is stored in frontend/src/api/config.js, which links to the deployed website in production by default ([http://dolphinflashcards.com/api/](http://dolphinflashcards.com/api/)).

In this feature, you'd be updating the frontend code to properly develop the card operations menu, which is a menu with options like "Rename" or "Delete". I'm currently coming to the end of a big database refactor to switch databases, so the code to interact with the database has been completely changed. The new code is stored in a seperate branch. API methods need to be written to rename and delete cards. But since the code needs to be rewritten anyway, it makes sense if I add those changes to my branch where I'm working on the database refactor, which will be complete soon.

So you'd be updating the react frontend to:

  • Decide what happens when you click the Rename and Delete buttons (for example, for the rename button, a text box should popup as a popup, and have a cancel and rename button). That rename button text to the text input could close the popup and make the flashcards displayed on the main page rerender.
  • Implementing the above
  • But this wouldn't actually interact with the API yet, so they won't actually do anything
  • Instead, make it so when you press the "Rename" or "Delete" buttons, it alerts something like "Deleting (flashcard id) from (parent folder path)". This will make it easier to link the data to the API when I've finished the API changes

You will need to create an account (go to http://dolphinflashcards.com/dashboard), then generate an API request to create demo data for testing, since you can't create folders and flashcards with the frontend client yet. I'll tell you how to do that later, when I have time to test what I tell you to double check it works. Once you've done that, you can go to the flashcards page, and you should see the data. Note that if you haven't generated data with the API, the flashcards page will show a white screen - there's an unhandled exception when you don't have any data, which I'm working on fixing, but haven't merged that branch yet.

I'll send the UI designs in figma in a little while.

Sorry for my late reply! Let me know if you have any questions.

So I'd need to send you the UI designs and more information about the API before you'd be able to get started.

from dolphin-flashcard-app.

jacob-macleod avatar jacob-macleod commented on June 29, 2024

@rkotchamp I've invited your email address from your profile to Figma. The Prototype page stores the designs that are being developed. The "Card Operations" widget below is the one that you'd be working on, although what actually happens when you press each button hasn't been designed yet. The "move" button is currently the only functional one.
image

from dolphin-flashcard-app.

jacob-macleod avatar jacob-macleod commented on June 29, 2024

@rkotchamp did you want to work on this? If not, no worries 😃

from dolphin-flashcard-app.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.