diff --git a/README.md b/README.md
index b87cb00449efa5b6131f56b7e45cc63eddf37373..9e123d07f619192b7f7c0c282864ba2564af2dac 100644
--- a/README.md
+++ b/README.md
@@ -1,46 +1,49 @@
-# Getting Started with Create React App
+# URLs
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+## The URL of the deployed app
 
-## Available Scripts
-
-In the project directory, you can run:
 
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+## Timesheet
+The timesheet is uploaded on Blackboard too.<br>
+https://docs.google.com/spreadsheets/d/1Nlrbq4YBkYUjgJGk-ZNfBDjagppEqsFC/edit#gid=2013650662
 
-### `npm test`
+# About the app
+Our application is a web based solution for storing and searching through a large set of different movies.
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+## Project setup
+We started by installing Node and npm, were Node 14.X and npm 6.X was required.
+Then, the project setup was done simply using [Create React App](https://github.com/facebook/create-react-app):
+```bash
+create-react-app project-3 --template typescript
+```
+This was very convenient not having to set everything up manually. It also fulfilled a requirement of using both React and Typescript for static typechecking.
+Then, we devided the project into two subprojects - 'client' and 'server'. This allowed for clear separation when working with either frontend or backend.
+To add the new project files to the repository, we installed git as required, added the remote, and pushed the project. 
 
-### `npm run build`
+## Backend
+GraphQL was used for the backend as it was required. The resolvers here would query on to the database.
+For the database management system, we used MySQL, as we were already familiar with using it, and had an assigned database served by NTNU. For the dataset, we used [mockaroo.com](http://mockaroo.com), which can be used to generate datasets of any kind in any format. At first, we tested this locally by exporting the dataset in a JSON format, and eventually exported the dataset as a MySQL script that could be executed to fill up the database. This allowed us to test the application for large datasets as the website can generate datasets of any size. 
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+To prevent overloading data from the backend, we used a limit in the client by using pagination ? @thomas
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+## Frontend
+For the client, we used the JavaScript Fetch API in order to fetch data from the /graphql endpoint on the server. This worked well by first generating a query based on what was needed in the client, and passing it to the fetch function. The result was then updated in the state.
+MobX was used to for managing a global state. The choice of using MobX was based on the fact that it is regarded as easy to use compared to other Libraries like Redux, as it has more abstraction, and allows for simpler and overall less code. We used this to share movies between the search function and the Movies component that displays them to the user. This meant that whenever a search was made, the Movies component would automatically update with a new list of movies.
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+The website was made using multiple different components composed together on one page. A responsive layout was made possible using flexbox in css. The main components are the "Movies" and the "Header" components. Movies contains a list veiw of all the movies retreived. Header is at the top, with a search bar along with filtering options.
+We tried to design it as simple and intuitively as possible so that any user will be able to use the website.
 
-### `npm run eject`
+## Deployment
+We deployed the app to gitlab using CI pipeline by creating and adding gitlab-ci-yml file to the project. The CI pipeline works in our project, and the deployed website is linked at the top. The client was buildt simply using `npm run build`. However, the server side had to be compiled manually using TypeScript instead of nodemon to build. Then, we moved the project files over to the VM. Finally, we could run the server using the Library 'NoHup' instead of nodemon for the server to complete the pipeline and keep running.
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+## Available Scripts
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+In each of the project directories 'client' and 'server', you can run:
 
-## Learn More
+### `npm start`
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
index 47a4590c1887160b6d48eb98301b6a8f44d1583f..018fea9eb60f7c7da12f6d041f5ab57ff9535d09 100644
--- a/client/src/components/Header.tsx
+++ b/client/src/components/Header.tsx
@@ -14,6 +14,7 @@ interface MoviesProps {
     moviesStore: MoviesStoreImplementation
 }
 
+// header containing search field with filtering options
 class Header extends React.Component<MoviesProps, MyState> {
     constructor(props: any) {
         super(props);
@@ -40,7 +41,7 @@ class Header extends React.Component<MoviesProps, MyState> {
         )
     }
 
-
+    // sets state based on input from user
     handleChange = (event: any) => {
         let element = event.target.id
         
@@ -59,7 +60,7 @@ class Header extends React.Component<MoviesProps, MyState> {
         this.getMoviesBySearch('title genre year', this.state.inputTitle, this.state.inputGenre, this.state.checkbox1_checked);
     }
 
-
+    // returns movies by given field
     getMovieByColumnType(columnType : services.ColumnType, value: string, neededData: string) {
         services.queryFetch(services.generateQuery(columnType, value, neededData))
         .then(res => res.json())
@@ -69,6 +70,7 @@ class Header extends React.Component<MoviesProps, MyState> {
         })
     }
 
+    // returns movies using search filtering
     getMoviesBySearch(neededData: string, title: string, genre: string, order: boolean) {
         services.queryFetch(services.generateSearchQuery(neededData, title, genre, order))
         .then(res => res.json())
diff --git a/client/src/components/Movies.tsx b/client/src/components/Movies.tsx
index e22bb2ed7db9a1b60e1c3b5145a97342e82b597e..84cf31938a74f0ed58a171a156066df351514f26 100644
--- a/client/src/components/Movies.tsx
+++ b/client/src/components/Movies.tsx
@@ -10,7 +10,7 @@ interface MoviesProps {
     moviesStore: MoviesStoreImplementation
 }
 
-
+// returns printTable with pagination. gets all movies by default, otherwise uses search results
 function Movies(props: MoviesProps){
 
     useEffect(() => {
@@ -19,7 +19,7 @@ function Movies(props: MoviesProps){
         }
     }, []);
 
-    
+    // generates GraphQL query for getting all movies
     function generateAllMoviesQuery(lim: number){
         return `
             query {
@@ -29,7 +29,7 @@ function Movies(props: MoviesProps){
             }`
     }
 
-
+    // returns all movies from backend
     function getAllMovies(params: any) {
         services.queryFetch(generateAllMoviesQuery(params.lim))
         .then(res => res.json())
@@ -40,6 +40,7 @@ function Movies(props: MoviesProps){
         })
     }
 
+    // returns movies by given field
     function getMovieByColumnType(columnType : services.ColumnType, value: string, neededData: string) {
         services.queryFetch(services.generateQuery(columnType, value, neededData))
         .then(res => res.json())
diff --git a/client/src/components/MoviesStore.tsx b/client/src/components/MoviesStore.tsx
index d6615fcf18ab226b54084678ffdc57c95a217445..9ab161766ba2eeb73e277d5d93fde9008f5bc92d 100644
--- a/client/src/components/MoviesStore.tsx
+++ b/client/src/components/MoviesStore.tsx
@@ -1,5 +1,6 @@
 import { action, makeObservable, observable } from "mobx";
 
+// implements global state using MobX library
 export class MoviesStoreImplementation {
 
     movies: Array<object> = [];
diff --git a/client/src/components/PrintTable.tsx b/client/src/components/PrintTable.tsx
index 358207f145be86371d056a11c9a6f4669e67aa66..cb02e1fb1db7fd2c8941ef302be44700566e82ba 100644
--- a/client/src/components/PrintTable.tsx
+++ b/client/src/components/PrintTable.tsx
@@ -1,4 +1,4 @@
-
+// Returns list of movies
 function PrintTable(props: any) {
     return (
         <table>
diff --git a/client/src/components/services.ts b/client/src/components/services.ts
index 940a8c30ae6fdc06ef7bb9868e8da050cf99ce74..5c2a692e6731ae699674dadb96361af992b2f599 100644
--- a/client/src/components/services.ts
+++ b/client/src/components/services.ts
@@ -1,3 +1,4 @@
+// used to send all requests to backend
 export function queryFetch(query: String) {
     return fetch('http://it2810-54.idi.ntnu.no:4000/graphql', {
         method: 'POST',
@@ -19,8 +20,8 @@ export enum ColumnType{
     Description
 }
 
+// generates custom GraphQL query based on field, value of given field, and what data is needed
 export function generateQuery(columnType: ColumnType, value: string, neededData: string){
-
     let column = '';
 
     switch(columnType){
@@ -48,7 +49,6 @@ export function generateQuery(columnType: ColumnType, value: string, neededData:
         default:
             column = 'id';
             break;
-    
     }
 
     return `
@@ -59,7 +59,7 @@ export function generateQuery(columnType: ColumnType, value: string, neededData:
     }`;
 }
 
-
+// generates specialized GraphQL query for search
 export function generateSearchQuery(neededData: string, title: string, genre: string, order: boolean){
     let query = `
     query {
diff --git a/server/src/server.ts b/server/src/server.ts
index 6b2072d83d1cbb93acc3f9f9695922d2f8347417..ec2f974f9c15edbb3370c433b6ba0527134e19fe 100644
--- a/server/src/server.ts
+++ b/server/src/server.ts
@@ -92,6 +92,7 @@ function getQuery(key: string, value: string){
     return 'SELECT * FROM movie WHERE ' + key + ' = "'  + value + '"'
 }
 
+// builds specialized query for searching with filtering
 function getSearchQuery(title: string, genre: string, order: boolean): string {
     let query = 'SELECT * FROM movie'
     if (title != '') {