By Chad Calcote, Chris Clark, Daniel Chin, Demeatrice J. Sherrod - Live site
A Meetup clone designed for fellow programmers to meet other tech-minded individuals within groups and at events in their area.
You can also visit Meetup here.
For a deeper dive into our planning process and code setup, please visit our Wiki!
Table of Contents
- Codezvous at a Glance
- Technologies Used
- Application Architecture
- Frontend Overview
- Backend Overview
- Backend Installation and Setup
- Frontend Installation and Run Application Locally
- Conclusion
Codezvous is a Meetup clone designed for fellow programmers to meet other tech-minded individuals within groups and at events in their area.
The application is made with a React frontend utilizing original components. The backend is a Python Flask server with a PostgreSQL database.
Key Features
- User sign in / sign up with flask-login authentication and encrypted password with werkzeug
- View, create, and join tech groups in your area
- View, create, and RSVP for events of the groups you are a part of
- Comment and see other comments on events
- Frontend
- React
- Javascript
- Redux
- CSS
- Backend
- Flask
- Python
- Postgres
- SQLAlchemy
- Alembic
- Heroku deployment via Docker
The frontend is a create-react-app
using functional components with hooks. The backend is a Flask server with various RESTful endpoints. They are deployed via Docker to a Heroku server.
The front end is is modeled after Meetup and uses all original styling. We implemented a custom component library for all events, groups, and users to keep styling the same and DRY up the code base.
Code Snippet Description Here:
Code Snippet Photos Code Snippet Photos
The Flask backend is a collection of RESTful routes serving data to the frontend and an interface with the Postgres database.
The database is queried using the SQLAlchemy ORM, and seed data was created using the faker packing and added using the Alembic library:
-
Clone this repository (only this branch)
git clone https://github.com/Dem-Eat-Rice/Codezvous-App
-
Install dependencies
pipenv install --dev -r dev-requirements.txt && pipenv install -r requirements.txt
-
Create a .env file based on the .env.example with proper settings for your development environment
-
Setup your PostgreSQL user, password and database and make sure it matches your .env file
-
Get into your pipenv, migrate your database, seed your database, and run your flask app
pipenv shell
flask db upgrade
flask seed all
flask run
-
To run the React App in development, checkout the README inside the
react-app
directory.
IMPORTANT! If you add any python dependencies to your pipfiles, you'll need to regenerate your requirements.txt before deployment. You can do this by running:
pipenv lock -r > requirements.txt
ALSO IMPORTANT! psycopg2-binary MUST remain a dev dependency because you can't install it on apline-linux. There is a layer in the Dockerfile that will install psycopg2 (not binary) for us.
This project was bootstrapped with Create React App.
No environment variables are needed to run this application in development, but be sure to set the REACT_APP_BASE_URL environment variable in heroku!
This app will be automatically built when you deploy to heroku, please see the heroku-postbuild
script in your express.js
applications package.json
to see how this works.
-
Change Directory to react-app
cd react-app
-
Install Dependencies
npm install
- Start the local host
npm start
- Visit application at localhost:3000 (changes you make locally will appear)
Codezvous was our idea as a team to create a Meetup clone that was more niche. As outgoing developers who have been bogged down behind our desks and writing endless lines of code, we wanted to create a platform for individuals like ourselves to meet other engineers in their area, network, and talk about code, all coming together for the common goal to strengthen technology in your community.
Future features would include a search bar to find events and groups, categories to isolate events or groups, and a calendar feature to keep you and your groups' events organized.