Role | Name |
---|---|
Frontend Developer | Ali |
Frontend Developer | Deniz |
Frontend Developer | Filiz |
Frontend Developer | Zeynep |
Backend Developer | Burak |
DistrictX is a platform that show movies list as popular,trending with their details that keep infos about actors, year, rating, votes, explanation, where to watch, trailer and primarily keeps track of movies users watched or plan to watch in the future.
This project's backend is deployed on the azure.
- Users can create an account and login with their credentials.
- Users can see the movies in the related page.
- Users can see the detail of movies in the related page.
- Users can search the movies with typing to find related output.
- Users can check the about page.
- Users who logged in can reach their profil page to see their credentials.
- Users who logged in can add the movies to their watched list.
- Users who logged in can add the movies to their watchlist.
- Users who logged in can see the movies that added in their watched list in their profile.
- Users who logged in can see the movies that added in their watchlist in their profile.
This project was bootstrapped with Create React App. Create React App is Facebook's officially supported way to create single-page React applications. It offers a modern build setup with no configuration.
In order to start the project, you will need node
and npm
installed on your machine.
First you need to go to frontend directory:
cd app
cd frontend
Then you can run:
You should install npm modules by running this command in the terminal:
npm install
Inside the newly created project, you can run npm start, that will run the app in development mode. Open http://localhost:3000 to view it in the browser. The page will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console.
Runs the app and directs to the browser in the development mode.
npm start
Consuming backend service to get movies data, backend service is running on azure. You can check it on the deployed link in the DistrictX title.
First you need to download Mongo.DB and redis to run springboot. On the backend directory you can run:
mvn clean package
mvn spring-boot:run
Also backend service is available on this endpoint:
All project files listed under app
folder.
2020-bootcamp-team-9
├── app
├──backend
│ ├── config # Cors, Redis, SpringMongo, Swagger Configurations
│ ├── controller # Controller for user and movie
│ ├── domain/model # User defines under this folder
│ ├── dto # User dto defines under this folder
│ ├── externalservice # Trackt and Funart services define under this folder
│ ├── models # Models for parsing http response from external service
│ ├── repository # User repository defines under this folder
│ ├── service # User service defines under this folder
│ └── startup.java # Runs springboot application
└──frontend
├── components # UI components
├── config # Firebase initilazing
├── containers # Screen components
├── data # Dummy datas for early work
├── images # All app images are here
├── redux # Redux, Actions, Contants define under this folder
├── service # Services that we use define under this folder
├── theme # All SCSS files goes here
├── index.js # Application start here
├── serviceWorker.js # Service Integrations
└── setupTests.js # Enzyme & Jest Test Integrations
And also, in this project React-Bootstrap
have been used. With this UI framework, some sample UI components used from react-boootstrap
.
- Some UI Components are created with React Bootstrap.
SCSS
files listed undertheme
folder. And also, this folder is overrides thebootstrap
theme, so that we have usedbootstrap
andnode-sass
.
Libraries used to create components and screens.
- React Bootstrap - UI Framework
- Bootstrap - UI Framework Stylings
- node-sass - To enable write
SCSS
&SASS
- react-router-dom - Router
- react-toastify - Toast Messages
- Redux, React-redux, Immer - For Redux Usage
- axios - Promise based HTTP client for the browser and node.js
- react-bootstrap-carousel - For using slideshow component