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

 
(8 intermediate revisions by 3 users 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>HEADING 1</h1>
+
            An easy access platform with a database of various host organisms and a collection of tools to work with them.
             <h2>heading 2</h2>
+
             <h1>The blueprint of an organism</h1>
            LIFE
+
             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>
 +
<li>Scientific name (genus, species and strain) and taxonomy</li>
 +
<li>Biosafety level</li>
 +
<li>A description of what makes the host special for synthetic biology applications</li>
 +
<li>Genotype</li>
 +
<li>Growth characteristics</li>
 +
<li>Culture sources for obtaining the organism</li>
 +
<li>Maintenance protocols</li>
 +
<li>Transformation protocols</li>
 +
<li>Other protocols</li>
 +
<li>Biobrick parts for this organism</li>
 +
<li>Vectors for the organism</li>
 +
<li>Metabolic models</li>
 +
<li>Genome sequence</li>
 +
</ul>
 +
<h1>Building the database</h1>
 +
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>
 +
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.
 +
<h2>Front-end</h2>
 +
The front-end was done using HTML, CSS and JavaScript.
 +
<h1>User Experience Design</h1>
 +
<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.
 +
<br><img src="https://static.igem.org/mediawiki/2017/b/b2/T--IIT-Madras--ss1.png" style="width: 100%;"> 
 +
 
 +
<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.
 +
<br><img src="https://static.igem.org/mediawiki/2017/d/da/T--IIT-Madras--ss2.png" style="width: 100%;">
 +
 
 +
<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
 +
<br><img src="https://static.igem.org/mediawiki/2017/5/53/T--IIT-Madras--ss3.png" style="width: 100%;">
 +
 
 +
<h1>Chassis tools</h1>
 +
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.
 +
 
 +
<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.
 +
<br><img src="https://static.igem.org/mediawiki/2017/a/a0/T--IIT-Madras--ss4.png" style="width: 100%;">
 +
 
 +
<h2>Future work</h2>
 +
We plan to similarly integrate more such chassis tools such as those for genome analysis and metabolic simulations.
 +
 
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
</html>
 
</html>
 
{{IIT-Madras--Footer}}
 
{{IIT-Madras--Footer}}

Latest revision as of 00:28, 2 November 2017

Team IIT-Madras

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.