Difference between revisions of "Team:IIT-Madras/Design"

 
(2 intermediate revisions by the same user not shown)
Line 9: Line 9:
 
     <div class="row" style="grid-template-columns: 768px; background: #ffffff; justify-content: center;">
 
     <div class="row" style="grid-template-columns: 768px; background: #ffffff; justify-content: center;">
 
         <div class="box mainbox" style="padding: 40px;  color: #161b1f; background: white;">
 
         <div class="box mainbox" style="padding: 40px;  color: #161b1f; background: white;">
−
             <h1>An easy access platform with a database of various host organisms and a collection of tools to work with them.</h1>
+
             An easy access platform with a database of various host organisms and a collection of tools to work with them.
−
             <h2>The blueprint of an organism</h2>
+
             <h1>The blueprint of an organism</h1>
 
             To create the database of host organisms, we first started by defining a template/blueprint of the data that needs to be collected about each organism. Our proposed blueprint consists of the following:
 
             To create the database of host organisms, we first started by defining a template/blueprint of the data that needs to be collected about each organism. Our proposed blueprint consists of the following:
 
<ul>
 
<ul>
Line 28: Line 28:
 
</ul>
 
</ul>
 
<h1>Building the database</h1>
 
<h1>Building the database</h1>
−
A database site design consists of two essential components: a backend that is responsible, storing data on the server and serve the data when requested, and a front-end that is responsible for creating a visual interface between the back-end and the user.
+
A database site design consists of two essential components: a backend that is responsible for storing data on the server and serve the data when requested, and a front-end that is responsible for creating a visual interface between the back-end and the user.
 
<h2>Back-end</h2>
 
<h2>Back-end</h2>
 
Our backend is powered by Flask, a framework for Python. All the data about different organisms are stored as .json (JavaScript Object Notation) files on the server.
 
Our backend is powered by Flask, a framework for Python. All the data about different organisms are stored as .json (JavaScript Object Notation) files on the server.
Line 35: Line 35:
 
<h1>User Experience Design</h1>
 
<h1>User Experience Design</h1>
 
<h2>Home page</h2>
 
<h2>Home page</h2>
−
When the user hits on the home page, (s)he can either search for organisms, browse through the index or choose to contribute data for an organism that are not yet in the database.   
+
When the user hits on the home page, (s)he can either search for organisms, browse through the index or choose to contribute data for an organism that are not yet in the database.
 +
<br><img src="https://static.igem.org/mediawiki/2017/b/b2/T--IIT-Madras--ss1.png" style="width: 100%;">  
  
 
<h2>Add/edit page</h2>
 
<h2>Add/edit page</h2>
 
The add new organism page and edit organism data page have a similar design, carefully designed to provide the user with the description of the data that is expected to be entered.
 
The add new organism page and edit organism data page have a similar design, carefully designed to provide the user with the description of the data that is expected to be entered.
 +
<br><img src="https://static.igem.org/mediawiki/2017/d/da/T--IIT-Madras--ss2.png" style="width: 100%;">
  
 
<h2>View page</h2>
 
<h2>View page</h2>
 
The details about each organism can be viewed on the view page. The page is designed for easy navigation to different sections of the entry. This page also contains a link to edit the entry
 
The details about each organism can be viewed on the view page. The page is designed for easy navigation to different sections of the entry. This page also contains a link to edit the entry
 +
<br><img src="https://static.igem.org/mediawiki/2017/5/53/T--IIT-Madras--ss3.png" style="width: 100%;">
  
 
<h1>Chassis tools</h1>  
 
<h1>Chassis tools</h1>  
Line 48: Line 51:
 
<h2>Codon optimization tool</h2>
 
<h2>Codon optimization tool</h2>
 
We have designed and integrated a highly interactive tool for codon optimization. The optimized sequence can be manually edited to remove restriction sites or reduce GC content, using a drop-down menu that shows codons that can be used to replace the current codon without changing the amino acid.
 
We have designed and integrated a highly interactive tool for codon optimization. The optimized sequence can be manually edited to remove restriction sites or reduce GC content, using a drop-down menu that shows codons that can be used to replace the current codon without changing the amino acid.
 +
<br><img src="https://static.igem.org/mediawiki/2017/a/a0/T--IIT-Madras--ss4.png" style="width: 100%;">
  
 
<h2>Future work</h2>
 
<h2>Future work</h2>

Latest revision as of 00:28, 2 November 2017

Team IIT-Madras



Home
Team
Team Collaborations
Project
Description Design Notebook Contribution Demonstrate Improve Attribution
Human Practices
Silver HP Integrated and Gold Public Engagement
Design
An easy access platform with a database of various host organisms and a collection of tools to work with them.

The blueprint of an organism

To create the database of host organisms, we first started by defining a template/blueprint of the data that needs to be collected about each organism. Our proposed blueprint consists of the following:
  • Scientific name (genus, species and strain) and taxonomy
  • Biosafety level
  • A description of what makes the host special for synthetic biology applications
  • Genotype
  • Growth characteristics
  • Culture sources for obtaining the organism
  • Maintenance protocols
  • Transformation protocols
  • Other protocols
  • Biobrick parts for this organism
  • Vectors for the organism
  • Metabolic models
  • Genome sequence

Building the database

A database site design consists of two essential components: a backend that is responsible for storing data on the server and serve the data when requested, and a front-end that is responsible for creating a visual interface between the back-end and the user.

Back-end

Our backend is powered by Flask, a framework for Python. All the data about different organisms are stored as .json (JavaScript Object Notation) files on the server.

Front-end

The front-end was done using HTML, CSS and JavaScript.

User Experience Design

Home page

When the user hits on the home page, (s)he can either search for organisms, browse through the index or choose to contribute data for an organism that are not yet in the database.

Add/edit page

The add new organism page and edit organism data page have a similar design, carefully designed to provide the user with the description of the data that is expected to be entered.

View page

The details about each organism can be viewed on the view page. The page is designed for easy navigation to different sections of the entry. This page also contains a link to edit the entry

Chassis tools

We decided to make ChassiDex the one-stop solution for dealing with your host. Hence, we intended to integrate some chassis tools which can be used on the different chassis within the database. These are tools that are vital to molecular biology work on the chassis and such an assembly of tools at one place eases the process of working with them.

Codon optimization tool

We have designed and integrated a highly interactive tool for codon optimization. The optimized sequence can be manually edited to remove restriction sites or reduce GC content, using a drop-down menu that shows codons that can be used to replace the current codon without changing the amino acid.

Future work

We plan to similarly integrate more such chassis tools such as those for genome analysis and metabolic simulations.
Contact Us

igemiitmadras@gmail.com

Department of Biotechnology
Indian Institute of Technology Madras
Sardar Patel Road
Chennai, India - 600036