Docs
Getting Started

This section provides a comprehensive guide to setting up and running your project, which consists of a frontend implemented using Next.js and a backend using Django. You can find detailed info on why this stack is chosen below, along with prerequisites, installation steps, and troubleshooting tips.

Why This Tech Stack?

Our project leverages a powerful combination of technologies for both frontend and backend development:

Frontend: Next.js, TailwindCSS, TypeScript

  • Next.js: Provides server-side rendering, static site generation, and excellent performance optimizations.
  • TailwindCSS: Offers utility-first CSS for rapid UI development.
  • TypeScript: Adds static typing to JavaScript, enhancing code quality and developer productivity.

Backend: Django with Django-Ninja

  • Django: A high-level Python web framework that encourages rapid development and clean, pragmatic design.
  • Django-Ninja: Adds fast API endpoints to Django, similar to FastAPI but integrated seamlessly with Django.

This stack combines the best of both worlds: a modern, performant frontend with a robust, scalable backend. It allows for rapid development while maintaining code quality and performance.

Prerequisites

Ensure you have the following software and tools installed:

Operating System

  • Windows, macOS, or Linux

Software

  • Python 3.8+
  • Node.js 20+
  • Django 3.2+
  • Next.js 13+
  • Anaconda (for managing Python environments)
  • Git (for version control)
  • Docker (optional, for containerization)

Hardware

  • Minimum 8 GB RAM
  • 20 GB free disk space

Set Up the Backend (Django)

Clone the Repository

git clone https://github.com/m2b3/SciCommons-backend.git
cd SciCommons-backend

Create and activate a virtual environment using Anaconda:

conda create -n <env_name> python=3.12.3
conda activate <env_name>
pip install poetry

Install the required Python packages using poetry:

poetry install
poetry run post_install # This command will install the pre-commit hooks

Create a .env and add the environment variables present in the .env.example file

.env.example
# Django
 
EMAIL_HOST_USER = # The email address to be used for sending emails from your Django application
EMAIL_HOST_PASSWORD = # The password associated with the EMAIL_HOST_USER
EMAIL_PORT = # The port number to be used for sending emails (e.g., 587 for Gmail)
EMAIL_USE_TLS = # A boolean value (True or False) indicating whether to use TLS encryption for email communication
DEFAULT_FROM_EMAIL = # The default email address to be used as the "from" address when sending emails from your Django application
 
# Database
 
DB_NAME = # The name of your database
DB_USER = # The username to be used for connecting to the database
DB_PASSWORD = # The password associated with the DB_USER
DB_HOST = # The hostname or IP address of the database server
DB_PORT = # The port number to be used for connecting to the database
DATABASE_URL = # A URL-style string containing all the database connection details (e.g., postgres://user:password@host:port/dbname)
 
# Frontend URL
 
FRONTEND_URL = # The URL of your frontend application
 
# AWS S3 Configuration
 
AWS_ACCESS_KEY_ID = # The access key ID for your AWS account
AWS_SECRET_ACCESS_KEY= # The secret access key for your AWS account
AWS_STORAGE_BUCKET_NAME = # The name of the S3 bucket to be used for storing files
AWS_S3_REGION_NAME = # The region name of the S3 bucket (e.g., us-east-1)
touch .env
cp .env.example .env

On Linux and macOS, use these commands in the terminal. The touch command creates an empty .env file if it doesn't exist, and cp copies the contents of .env.example to .env.

💡

Make sure to reopen your editor if you ever change the environment variables in the .env file to reflect the changes as we're using python-decouple to read the environment variables.

Apply database migrations:

poetry run python manage.py migrate

Create a superuser:

poetry run python manage.py createsuperuser

Start the Django development server

poetry run python manage.py runserver

You can now access the server at http://localhost:8000/ (opens in a new tab) and API documentation at http://localhost:8000/api/docs/ (opens in a new tab)

Set Up the Frontend (Next.js)

Clone the Repository and Navigate to the frontend directory

git clone https://github.com/m2b3/SciCommons-frontend.git
cd SciCommons-frontend

Create a .env.local and add the environment variables present in the .env.example file

.env.example
NEXT_PUBLIC_BACKEND_URL=http://localhost:8000 # URL of the backend server
touch .env
cp .env.example .env.local

On Linux and macOS, you can use these commands in the terminal. The touch command creates an empty .env file if it doesn't exist, and cp copies the contents of .env.example to .env.local.

Install the required Node.js packages

yarn

Start the Next.js development server

yarn dev

Quick Start

  • Access the Frontend: Open your web browser and go to http://localhost:3000 to see the project running.
  • Access the backend admin panel: Open your web browser and go to http://localhost:8000/admin and log in using the superuser credentials created during the setup.
  • Explore core features: Create a user, post an article, join a community, and view posts.

Testing

Backend Tests:

poetry run python manage.py test

Frontend Tests:

yarn test

Troubleshooting

Issue: Port 8000 is already in use

Solution: Change the port number in manage.py:

python manage.py runserver 8080

Issue: ModuleNotFoundError

  • Solution: Ensure all dependencies are installed and the virtual environment is activated.

Issue: Next.js API routes not working

  • Solution: Ensure your API routes in Next.js match the expected paths and that the Next.js server is running.
FAQ and TroubleshootingProject Structure