chloebarber/mario-kart-high-score

Welcome to Mario Kart High Score

Mario Kart High Score is an app based on the Map My Run website that allows users to record their race times for their favorite Mario Kart courses and add comments about their race experience. Mario Kart High Score was created using Flask, React, and Redux.

A live link to the website can be found here: https://mk-highscores.herokuapp.com/

Website walk-through

Homepage, Course Page, Sign Up Page, Login Page

Course Page in detail, showing CRUD functions for user comments and user records

MK Racers Page (full user list) and My Profile Page (showing user profile)

Features

• Sign up/in with email and password
• Explore all the courses from every Mario Kart Game
• Leave comments on any courses
• Post your high score achievements on a course page to see how you rank
• Customize your user profile page from a list 42 pre-selected avatars and a custom bio

Future Features

• Add/Remove friends
• Friend list
• Search

Technologies used to build the website

Backend

• Flask
• Python
• JavaScript
• PostgresSQL
• SQLAlchemy
• WTForms

Frontend

• React
• JavaScript
• CSS3
• HTML5
• Heroku

Backend comment routes code snippets:

comment_route = Blueprint('comment', __name__)


@comment_route.route('/', methods=['POST'])
def postComment():
    form = CommentForm()
    form['csrf_token'].data = request.cookies['csrf_token']
    if form.validate_on_submit():
        data = form.data
        new_comment = Comment(user_id=data["user_id"],
                              course_id=data["course_id"],
                              content=data["content"])
        db.session.add(new_comment)
        db.session.commit()
        return new_comment.to_dict()
    return {'error': 'UH OH ERROR'}


@comment_route.route('/<int:id>/', methods=['PUT'])
def editComment(id):
    form = CommentForm()
    form['csrf_token'].data = request.cookies['csrf_token']
    if form.validate_on_submit():

        oldComment = Comment.query.get(id)
        form.populate_obj(oldComment)
        
        # db.session.add(oldComment)
        db.session.commit()

        return oldComment.to_dict()
    return {'error': 'UH OH ERROR'}


@comment_route.route('/<int:id>/', methods=['DELETE'])
def deleteComment(id):

    comment = Comment.query.get(id)
    db.session.delete(comment)
    db.session.commit()

    return comment.to_dict()

Frontend comment routes code snippets:

const AddCommentForm = () => {
    const sessionUser = useSelector(state => state.session.user)
    const courseInfo = useSelector((state) => state.courseInfo)
    // console.log(courseInfo)
    const dispatch = useDispatch();

    // const [course_id, setCourse_id] = useState(courseInfo.course.id);
    const [content, setContent] = useState("");
    // console.log(+listing)

    // const createUserId = (e) => setUser_id(e.target.value);
    // const createCourse_Id = (e) => setCourse_id(e.target.value);
    const createContent = (e) => setContent(e.target.value);

    const handleSubmit = async (e) => {
        
        e.preventDefault();

        const addComment = {
           user_id: sessionUser.id,
           course_id:courseInfo.course.id,
           content
        };
        await dispatch(createCommentThunk(addComment))

    };

    return (
        <div className='comment-form-div'>
            <form className='comment-form' onSubmit={handleSubmit}>
                <label className="content">
                    <input type="text" onChange={createContent} placeholder="What do you think about the course?"/>
                </label>

                <button className='commentSubmit__button' type='submit'>Submit</button>
            </form>
        </div>
    )
}

export default AddCommentForm;

Mario Kart High Score created by:

@chloebarber @meagan13 @ji-k @D3vila