Laughs is a web web app built to be a social platform for sharing jokes and connecting with others!

To run this application locally, you'll need to:

1. git clone this repo
2. cd into the local repo
3. pipenv install to install the backend dependencies
4. Create a .env file based on the .env.example file included in the repo with your own values
5. Create a user on your local machine with the username and password specified in your .env file in PostgreSQL
6. Create a database on your local machine with the name specified in your .env file in PostgreSQL
7. Go into the pipenv shell with pipenv shell
8. Run flask db upgrade to run the migrations
9. Run flask seed all to seed the database
10. Open another terminal and cd into the react-app directory and run npm install to install frontend dependencies
11. Create your own .env file in the react-app directory based on the .env.example there
12. Start your Flask backend in the terminal that's in the root of the local project with flask run
13. Finally, start the frontend server with npm start inside the react-app directory. The application should automatically open in your default web browser.
14. If you desire further modifications simply create a new branch and git push your changes to Github.

• Python
• PostgreSQL
• SQLAlchemy
• Flask
• WTForms
• React
• Redux
• JavaScript
• TailWindCSS
• Node.js
• AWS S3
• Docker
• Heroku

Here's a link to our live app!

Here's a link to our Wiki!

Users can:

• Post a joke
• Update their joke
• Browse jokes and comment on jokes
• Message others
• Search for specific jokes

The biggest part of the Laughs application is the Joke feed which takes in all jokes, then filters for comments on each joke and attaches a form to add a comment to a joke.

return (
        <div className="col-start-3 col-end-6 row-start-5 row-end-7 w-full h-full" >
            {allJokes.reverse().map((post) => {
                const { id, joke, jokeType } = post;
                const myDate = new Date(post.timestamp);
                const filteredComments = jokeComments.filter(joke => (joke.jokeId === id));
                return (
                    <div key={id} className="rounded-lg border-4 border-light-blue-500 border-opacity-50 p-1 m-2">
                            <h3 className="ml-1">{post.users.username}</h3>
                            <h3 className="ml-1">Joke Type: {jokeType}</h3>
                            <h3 className="ml-1">{myDate.toLocaleString()}</h3>
                            <h3 className="text-lg ml-1">{joke}</h3>
                            {filteredComments && filteredComments.map(comment => {
                                let user = allUsers.filter(usrObj => (usrObj.id === comment.userId));
                                return (<div key={comment.id} className="text-sm items-center bg-blue-joker my-1 ml-4 pl-1 rounded-lg w-2/5">
                                    {user[0].username}: {comment.comment}
                                </div>)
            })}
                            <ThreadForm id={id} />
                    </div>
                )
            })}
        </div>
    )