Dynamic flash card website with register/login

Important: I only need a 'shell'. It doesn't need to look nice, it just needs to have the basic functionality.

The user registers for the website, and then logs in.

Once the user is logged in, they are taken to the practice page which loads flashcards a shared database.

It loads about 50 and puts them in a table (3 columns wide - not 4 like shown in picture), and each flash card is about 300x300 pixels.

If the user scrolls to the bottom of the page, it loads more flashcards from the database (like in a google image search).

When the user clicks a flash card, it displays the back of the card.

The user can also sort the flashcards by 'date added', 'number of votes' and 'trending' (or 'hot').

There is also a search box which allows users to search and display cards that have the specified text on the back or front of the card.

There is also a 'add new card' card (seen in picture as a green '+' sign). When the user clicks this, they can add a new card to the database. By inputting text for the front and back of the card. html input tags appear in place of the green '+' sign, and a submit button appears underneath. (see 'add+[url removed, login to view]')

When the user clicks the card, they will see the back of the card, but they can also click a button that is on the back of the card which lets them see other possible answers (see 'click+[url removed, login to view]'). These other possible answers will appear as a list that will drop down underneath the selected card. Users can choose to add another answer of their own, or they can vote on the answer that they like the best (see 'see+more+[url removed, login to view]').

As an afterthought, the username of the submitter should be shown under each answer in the dropdown list.

When a user adds a card, a flashcard is created in the database. this flash card has these columns:

-username of user which created it

-text for front of card

-reference id to answers for back of card (because there can be multiple answers)

So the tables you'll need for your mySQL (and some ideas for columns) are:

>users (username, password, email, date created)

>cards (userid, date created, answer ref id)

>answers (ref id, userid, text, number of votes)

and i think that's about it. i may have missed something though.

The 'trending' sort option should give the newest cards with the most votes. (you'll just have to use a simple formula)

There is also a profile button in the top header. If they click it, it takes them to a simple page that displays their username, email, and number of votes received from people on their answers.

User registration requires email address, username and password. (this should be protected by a recapcha or similar)

The login form should be able to handle their email address instead of their username if they input it. There should also be a 'forgot password' button that takes them to a page where they input their email, and it sends them their password.

I need to do this on a very tight budget, so I don't want any tricks or shiny buttons - just give me the bare basics, I'll do the rest. If you have any questions about the back end or front end, I'm a web developer myself, so I should be able to answer some (semi) technical stuff.

And of course: All code must be documented extremely well!

If you've got any questions, just ask. I've probably missed a few points.

Cheers, looking forward to working with you!

Joe

EDIT:
Sorry if that's a bit confusing, I've typed it all a bit fast (and said some thing twice...). Please just ask me questions about anything you find confusing.

EDIT 2:
Clarification:
The user will be able to add a card by clicking on the green '+' button. They input the card info (fron and back text for the card) and the data will then be posted via ajax to a php file (maybe 'addcard.php'). The php file will then add the card to the 'cards' table in the mySQL database.

***Front end design skills will be necessary, but I'm not looking for a finished product. As long as everything is in it's proper place, then its fine. It doesn't have to look nice.

CSS HTML JavaScript MySQL PHP

Project ID: #4280701

About the project