This project is designed to facilitate the study process for new students in University of Duisburg-Essen by sharing experience, advices, and helpful files among students.
Project for the course: Advanced web technologies, International studies in engineering, Master of computer engineering, University of Duisburg-Essen
A project logo/teaser image showcasing your project that is suitable for a medium-sized thumbnail image for the course web page
- Register & login
- Change username, password, and personal image
- Add posts such as; inquiries and advices
- Upload helpful files and materials (only pdf, zip, and images)
- Interact on posts by adding comments, like, and dislike
- User can update his/her own posts (title, category, contents, and attachment) or remove them.
Logo
Landing page
Footer
Register page
Login page
Profile page
Updata personal data
Add post
Show post
Own posts
Modify posts
The application consists of two main parts:
- Backend: responsible for server-side web application logic, consists of a server, an application, and a database.
- Frontend: the part that users interact with it.
- Flask
- MongoDB for database
- React
- Bootstrap
- Axios
- Postman: to test connectivity especially for 'POST' method
- Gunicorn as a web server gateway interface "WSGI"
- mLab as a cloud database service
- Github
- Heroku
Make sure that you have mongoDB installed on your PC and we highly recommend you to use visual studio code as a code editor
- In the top level directory, go to
mongo.pyfile
comment line.15
app.config["MONGO_URI"] = os.environ.get("MONGODB_URI")
then uncomment line.16
app.config["MONGO_URI"] = "mongodb://localhost:27017/final"
- Open terminal and go to the path of mongo.py then type the following:
venv\scripts\activate
pip install -r requirements.txt
python mongo.py
The backend part should be running
- Go to
client\src\contexts\urlContext.js
comment line.3
export const UrlContext = createContext("https://first-attempt-advwebtech-ude.herokuapp.com/");
uncomment line.4
export const UrlContext = createContext("http://localhost:3000/");
- Go to
client\package.json
on line.41 make sure that proxy value is: "http://127.0.0.1:5000/"
- Open a new terminal and go to the path of client folder
npm install
npm start
If
npm startdoesn't work, do the following:
npm install rimraf -g
rimraf node_modules
npm start -- --reset-cache
then repeat step number 5
- In the top level directory, go to
mongo.pyfile
comment line.16
app.config["MONGO_URI"] = "mongodb://localhost:27017/final"
then uncomment line.15
app.config["MONGO_URI"] = os.environ.get("MONGODB_URI")
- Go to
client\src\contexts\urlContext.js
uncomment line.3
export const UrlContext = createContext("https://first-attempt-advwebtech-ude.herokuapp.com/");
comment line.4
export const UrlContext = createContext("http://localhost:3000/");
-
Seperate 'client' folder from main project folder to be deployed seperately as in the following guide
-
follow the guide Deploy web app to Heroku, mainly you need to do as follows:
- Deploy backend app to heroku after pushing it to github. Please follow the steps in the upmentioned guide
- Create an account on mLab, currently migrated to mongoDB Atlas, make sure to name database and collection as written in the code, and finally connect backend app to mLab as explained in the upmentioned guide
- Push client file to a new github repository and deploy it to heroku. Please follow the steps in the upmentioned guide and note that here you don't need to change url in axios part as you did that on step number 2
- On file
package.jsonmake sure that proxy value is equal to the url of the deployed backend app on heroku
Baohui Deng, Tannaz Vahidi, Amr Shakhshir