Unicorn Forum is my personal project which I did to get familiar with React and Django. It is not completely finished (see # TODOs section).
It is made with:
- Python 3.6.4;
- Django 2.0;
- React 16.3
- SASS & Bulma.css for styling.
- MySQL Database.
Also JWT for authorization/authentication and AJAX for different API calls.
It requires MySQL and virtualenv being installed on your machine.
mkdir unicorn_forum
cd unicorn_forum
Note dots:
git clone https://github.com/liubhub/unicorn-forum.git .
virtualenv -p python3 .
source bin/activate
Install requirements:
pip install -r requirements.txt
Than, you need MySQL: Login to MySQL
mysql -u your_username -p
and create database:
create database unicorn_forum
Return to your console, activate the virtual environment and create variables with login, password to mysql and your database name:
\q
export DATABASE_NAME='unicorn_forum'
export DATABASE_USER='your_username'
export DATABASE_PASSWORD='your_password'
Change directory:
cd forum
Than input your django SEKRET_KEY in forum/settings.py (you can generate it here (https://www.miniwebtool.com/django-secret-key-generator/) To create all database tables, run:
python manage.py migrate
Then you can run project typing a command:
python manage.py runserver
As a django project, unicorn_forum consists of different apps.
- api - for easy fetching data from database (i.e. /api/users, /api/threads)
- users - for all methods, related to users. For example, registration and authorization.
- app - main app with all models and basic methods.
- frontend - frontend app (see below)
- chat - future app for chat in the forum (currently it is a #TODO).
React in its own “frontend” Django app: load a single HTML template and let React manage the frontend. All templates are saved in this app.
Here are instructions how to configure frontend environment.
In your main folder where all virtualenv files are saved (it is unicorn_forum if you followed instructions): initialize the environment
npm init -y
next up install webpack and webpack cli with
npm i webpack webpack-cli --save-dev
Now open up package.json and configure the scripts:
"scripts": {
"dev": "webpack --mode development ./forum/frontend/src/index.js --output ./forum/frontend/static/frontend/main.js",
"build": "webpack --mode production ./forum/frontend/src/index.js --output ./forum/frontend/static/frontend/main.js"
}
Close the file and save it. Now let’s install babel for transpiling our code:
npm i babel-core babel-loader babel-preset-env babel-preset-react babel-plugin-transform-class-properties --save-dev
Pull in React and prop-types:
npm i react react-dom prop-types --save-dev
Then some other dependencies:
npm install axios --save-dev
npm install node-sass css-loader sass-loader style-loader --save-dev
Configure Babel by creating a new file named .babelrc inside the project folder:
{
"presets": [
"env", "react"
],
"plugins": [
"transform-class-properties"
]
}
And finally create a new file named webpack.config.js for configuring babel-loader:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test:/\.(s*)css$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
watch:true,
};
Now, to make webpack watch files for changes, you can run:
npm run dev
To enable email verification after registration on forum, set EMAIL_HOST_USER and EMAIL_HOST_PASSWORD variables in the forum/settings.py (works correct with gmail).
- chat app;
- edit_profile method;